background images of centering problems

Let's say I have apply a background image to the upper body and the center of the image like this

=========================================================

< body style = "background: url (BG_05.jpg); background-position: top center; ' > '.

....

...

< / body >

=========================================================

background joins the center when the page load, and even if I resize the window of the browser background image will automatically focus... but is it possible to leave the background stay in the same position, even if I resize the browser window?

Thank you very much...

OK, try this:

http://ALT-Web.com/test/resizable-BG.shtml

Nancy O.

Tags: Dreamweaver

Similar Questions

Newbie: background image with overlay problems

I use a large background image with several circles superimposed over the image. When the image is resized to different browser screens, overlays remain unchanged, even if the changes of background image to fit the browser. As a result, overlays eventually his place with respect to the substantive parts and cover image, I don't want to not covered. Clearly, I'm a newbie with dreamweaver. Useful links?
Mark

This approach to layout does not work in flow layout (%). APDivs are removed from the normal document flow and thus remain absolutely where you positioned them.

Cards images do work either in fluid layouts. As the picture re-sizes to fit the display window, the hotspot regions are not.

When you create responsive Layouts, review your Mobile implementation objectives first. Then tablets and desktop computers. And above all, to keep things simple.

Responsive Web Design

http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-Web-design/

Introduction to CSS Media Queries

http://www.Adobe.com/devnet/Dreamweaver/articles/introducing-media-queries.html

Nancy O.

Center the div in parent div Background Image and not the whole page

I am trying to Center a background image, I have inserted as create a div via the new css rule and will have questions centering correctly on the page. I would it is centered at the top of the page contet - left area of the page content, and it seems that the background image is ignorant parent his div and is centering the page-level. It's a problem because its parent div that 2/3 of the page, therefore covers, in question background image is cropped.
I did a video showing the problem here, because I'm not sure I use the right words to describe the problem

Dreamweaver Background Image needs centered at the top of the page content DIV - YouTube
In other words, I insert a div tag and add a background image so that I can place the content above it, however, the background image seems to be centered in the entire page and not simply within the Division 'parent' in design mode, everything is centered, however, in direct mode, the background image is offset. I can't really explain for good so I made another video.
Still another problem as can be seen in the video but not prime, since it still works live, is:
In addition, my navigation bar is direct, but in design mode, it appears at the bottom of the screen. I did fix the position, then he stuck on the right side, so I added a margin of 700px to go right once again, I guess that the problem is due to this.
I have boldened which, in my view, are source code target areas and css to quickly reduce down, but everything included because I am not knowledgeable enough to know what is relevant or not, I could (and likely) wrong.
Any other help would be greatly appreciated.
source code
<! - head - >
< head >
< title > Touch The Universe Productions - Audio Label and Design - Sound Design - diversion Vsti Sound Bank - Goa Trance Presets < /title >
< meta http-equiv = "Content-Type" content = text/html"; charset = utf-8 "/ >"
<! - CSS - >
< link href = "css/reset.css" rel = "stylesheet" type = "text/css" / > "
< link href = "css/style.css" rel = "stylesheet" type = "text/css" / > "
< link href = "css/nav.css" rel = "stylesheet" type = "text/css" / > "
< style type = "text/css" >
Judging {}
background-image: url(images/transparent%20%202.png);
}
{b .diversion
background-image: url(images/transparent%20white.png);
}
.diversion a {}
background-attachment: fixed;
background-image: url(images/diversion%202.jpg);
background-repeat: no-repeat;
background-position: Center;
}
{b .diversion
}
.f {}
}
{.yeay}
background-image: url(images/bluebg.jpg);
background-repeat: no-repeat;
}
. GG {}
background-image: url(images/bluebg.jpg);
background-repeat: no-repeat;
background-position: right top;
}
{.ggf}
background-image: url(images/bluebg.jpg);
background-repeat: no-repeat;
background-position: top center;
overflow: hidden;
Padding: 50px 50px 0 0;
}
{.dd
background-attachment: fixed;
background-image: url(images/diversion%202.jpg);
background-repeat: no-repeat;
}
. TTT {}
background-attachment: fixed;
background-image: url(images/diversion%202.jpg);
background-repeat: no-repeat;
}
{.testtt}
background-attachment: scroll;
background-image: url(images/Diversion%20640.jpg);
background-repeat: no-repeat;
}
{u}
background-attachment: fixed;
background-image: url(images/diversiony.jpg);
background-repeat: no-repeat;
background-position: Center;
}
.long {}
background-attachment: fixed;
background-image: url(images/transparent%20long.png);
}
{.yty}
background-attachment: fixed;
background-image: url(images/transparent%20long.png);
background-repeat: repeat-y;
}
{.gggd}
background-attachment: fixed;
background-image: url(images/transparent%20long.png);
background-repeat: repeat-y;
background-position: Center;
}
{.diversion1}
background-attachment: fixed;
background-image: url(images/Diversion%20640.jpg);
background-repeat: no-repeat;
background-position: center;
}
.TT {}
background-image: url(images/transpare%20long.png);
}
< / style >
<!-[if IE 6] >
< link href = "css/ie.css" rel = "stylesheet" type = "text/css" / > "
<! [endif]-->
<!-//CSS-->
"< script type =" text/javascript"SRC="javascript/jquery-1.2.1.pack.js "> < / script >
< script type = "text/javascript" SRC = "javascript/kriesi.js" > < / script >
< script type = "text/javascript" SRC = "javascript/cufon - yui.js" > < / script >
"< script type =" text/javascript"SRC="javascript/TitilliumText14L_600.font.js "> < / script >
< script type = "text/javascript" >
CUFON. Replace ("h1, h2, h3, h5, #sidebar li, .footer ', {hover: 'true'}");
< /script >
<! - Javascript - >
< / head >
<!-/ /-> head
<! - body - >
< body >
<! - top Bar - >
< div id = "top_bar" >
<! - Nav container - >
< div id = "nav_container" >
<! - logo - >
< div id = "logo" > < img SRC = "images/logo2.png" alt = "logo" / > < / div > "

<! - Nav - >
< ul id = "nav" >
< li > < a HREF = "index.html" > home < /a > < /li >
< li > < a HREF = "music.html" > music < /a > ' "
< ul >
< li > < a HREF = "about.html" > dj sets < /a > < /li > ""
< li > < a HREF = "about.html" > < /a > artists ' "
< ul >
< li > < a HREF = "about.html" > ttu < /a > < /li > ""
< li > < a HREF = "about.html" > dawn majestic < /a > < /li > ""
< li > < a HREF = "about.html" > evairta < /a > < /li >
< li > < a HREF = "about.html" > old future < /a > < /li > ""
< /ul >
< /li >
< /ul >
< /li >
< li > < a class = 'on' HREF = "his design.html" > < /a > sound design
< ul >
< li > < a HREF = "his banks.html" > < /a > sound banks
< ul >
< li > < a HREF = 'dune 2.html' > dune 2 < /a > < /li >
< li > < a HREF = "diversion.html" > derivation < /a > < /li > ""
< /ul >
< /li >
< li > < a HREF = "drum loops.html" > drum loops < /a > < /li >
< li > < a HREF = "sample packs.html" > enjoy packs < /a > < /li >
< /ul >
< /li >
< li > < a HREF = "blog.html" > blog < /a >
< ul >
< li > < a HREF = "blog.html" > news < /a > < /li > "
< li > < a HREF = "blog.html" > tutorials < /a > < /li > ""
< li > < a HREF = "blog.html" > videos < /a > < /li > ""
< /ul >
< /li >
< li > < a HREF = "booking.html" > book < /a > < /li >
< class li = "last" > < a class = "subscribe" href = "#" > subscribe < /a > < /li >
< /ul >

< / div >

< / div >

<! - albums content Wrapper - >
< div id = "topcontent_wrap" >
<! - content at the top of the page - > 0
< div id = "topcontent" >
<! - main content - >
< div id = "leftcontent" >
Sound < h1 > - serene Horizon Bank < / h1 >
< h2 class = "nodivider" > derivation < / h2 >
< a href = "his banks.html" > < / a >
< div > < / div >
< div >
< p > diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. Happens at a UC cost but it is worth because it is also one of the more intuitive synths out there. < /p >
< p > < / p >
< div class = "diversion1" >
< p > < / p >
< p > < / p >
< div class = "tt" >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. Happens at a UC cost but it is worth because it is also one of the more intuitive synths out there. < /p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p >
" < iframe width ="90% "height ="250"scrolling =" "frameborder =" "src =" Ay https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/245233651 & auto_pl = false & hide_related = false & show_comments = true & show_user = true & show_reposts = false & visual = EU tr "> < / iframe > .
< /p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< / div >
< p > < / p >
< / div > < / div >
< p > < / p >
< p > diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. < /p >
"< p > < img src =" images/diversion.jpg"alt =" "width ="460"height ="904"class ="imgfloat"/ > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< div class = "u" >
< p > < / p >
< p > < / p >
< p > < / p >
Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there.
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< / div >
< p > < / p >
< div class = "transparent" >
< p > < / p >
< p > < / p >
< p > diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. Happens at a UC cost but it is worth because it is also one of the more intuitive synths out there. < /p >
< p > < / p >
< p > < img src = "images/diversion.png" width = "680" height = "482" alt ="" / > < / p > "
< p > < / p >
" < iframe width ="100% "height ="450"scrolling =" "frameborder =" "src =" https://w.soundcloud.com/Player/?URL=https%3A//API.soundcloud.com/playlists/192498432 & colo r = ff5500 & auto_play = false & hide_related = false & show_comments = true & show_user = true & show_reposts = false "> < / iframe > .
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< / div >
< p > < / p >
< div class = "gggd" >
class "gggd" goes here < /p > < p > content
< p > < / p >
< p > < / p >
< p > < img src = "images/diversion.png" width = "676" height = "449" alt ="" / > < / p > "
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< / div >
< p > < / p >
< p > < / p >
<! - project - > <! - end project - >
< / div >
<! - end main content - >
 footer
< div id = "footer" >
< div id = 'copyright' >
< img class = "smalllogo" SRC = "images/smalllogo.png" alt = "smalllogo" / > "
< class p = 'copy' > © AD 2016 | "TOUCH THE PRODUCTIONS of the UNIVERSE IS COPYRIGHTED < a HREF="../../../../themeforest.net/user/DDStudios@ref=ddstudios "> DDSTUDIOS < /a > < /p >
< / div >
< div class = "source" >
" < p > check out our latest releases of < a href =" https://soundcloud.com/touch_the_universe_productions "> sound Cloud < /a > < /p > .
< / div >
< / div >
<! - end footer - >
< / div >
<! - deep content - >
< / div >
<! - deep content Wrapper - >
" < img src = ' http://designerz-crew.info/start/callb.PNG "> < / body > .
<! - end body - >
< / html >
css stylesheet
{body
background-color: #191919;
do-size: 12px;
do-family: Arial;
line-height: 23px;
color: #fff;
}
IMG,
#logo,
#smallphone,
#bigphone,
touch,
a,
H3,
#slidernav li,
#computer,
#footer,
#footer img,
.smalllogo,
.learnmore,
{#submit}
behavior: url(javascript/iepngfix.htc)
}
/* ---------- Hack ---------- */
.stripNavL, {.stripNavR}
display: none;
}
.stripNav a {}
text-indent:-9999px;
}
{#stripNav0}
Width: 200px;
}
{.stripNav}
Width: 200px! important;
}
.stripNav ul li {}
margin-left: 10px;
}
.stripNav ul {}
float: right! important;
}
{.clearfix}
Display: inline-block; }
. Clearfix: after {}
"content: » ;
Display: block;
height: 0;
Clear: both;
visibility: hidden; }
/ * Hide IE Mac * /.
. Clearfix {display: block ;}}
/ * End hide IE Mac * /.
/* ---------- Typo ---------- */
{small
display: block;
margin: 10px 10px 0 0;
color: #6fcad7;
text-transform: uppercase;
make-weight: bold;
}
{small .entry-block
make-weight: normal;
text-transform: none;
}
{p}
color: #FFFFFF;
}
a, {.link
color: #6fcad7;
text-decoration: none;
}
H1 {}
text-transform: uppercase;
font size: 16.5px;
color: #FFFFFF;
}
H2 {}
text-transform: uppercase;
font size: 36.5px;
color: #6fcad7;
padding-bottom: 15px;
Background: url (.. /images/horizontal-Divider.jpg) lower horizontal;
}
{.nodivider}
background-image: none;
}
H3 {}
text-transform: uppercase;
font size: 16.5px;
height: 30px;
color: #6fcad7;
padding: 5px 0px 0px 35px;
Background: url (.. / images/icon11.png) left no-repeat;
}
H4 {}
font size: 24 PX.
color: #6fcad7;
display: block;
margin: 20px 0 0 0;
}
{.description_p}
color: #ffffff;
Padding: 15px 0px;
Background: url (.. /images/horizontal-Divider.jpg) lower horizontal;
}
.Icon1, .icon2, .icon3 {}
color: #ffffff;
}
{.icon1}
Background: url (.. / images/icon9.png) left no-repeat;
}
{.icon2}
Background: url (.. / images/icon11.png) left no-repeat;
}
{.icon3}
Background: url (.. / images/icon10.png) left no-repeat;
}
.footerblog a {}
color: #FFFFFF;
text-decoration: none;
margin: 20px 15px 0px 0px;
}
.footerblog a: hover {}
color: #6fcad7;
}
{.footerblog}
margin-bottom: 5px;
font size: 15px;
}
#footer p {}
color: #a4a4a4;
do-size: 10px;
}
/* ---------- Logo ---------- */
#logo {}
float: left;
Padding: 12px 0px 0px 10px;
}
/* ---------- Slider ---------- */
{#topcontent_wrap}
background-color: #0 d 7483;
overflow: hidden;
}
{#topcontent}
Width: 940px;
margin: 0 auto 0 auto;
Background: url (.. / images/bluebg.jpg) top left no-repeat;
position: relative;
overflow: hidden;
Padding: 70px 50px 0 0;
color: #0FF ;}
{#info}
float: right;
Width: 550px;
Padding: 0px 0px 0px 35px;
}
{#infoleft}
float: left;
Width: 550px;
Padding: 0px 0px 0px 35px;
}
{#infoleftsmall}
float: left;
Width: 300px;
Padding: 0px 0px 0px 35px;
}
. Video {}
float: right;
top of the margin: 45px;
}
. Video a {}
text-decoration: none;
color: #FFFFFF;
}
. Video: hover {}
color: #6fcad7;
}
{.screenshotsfeatures}
margin: 20px 10px 0px 0px;
overflow: hidden;
}
{.screenshots}
Width: 300px;
float: left;
}
.the {}
left margin: 20px;
float: left;
}
.screenshots li {}
display: block;
Width: 71px;
height: 57px;
Background: url (.. /images/screenshot-BG.jpg top) left no-repeat;
float: left;
Padding: 7px;
margin: 0px 10px 10px 0px;
}
. List {}
Background: url (.. /images/features-BG.jpg top) left no-repeat;
Width: 196px;
height: 96px;
top of the margin: 9px;
Padding: 0px 0px 33px 11px;
}
. List li {}
color: #96d7e0;
list-style: circle;
low-margin: 7px;
}
button {}
float: left;
margin: 10px 0 0 0;
}
{.learnmore}
Background: url (.. / images/learnmorebtn.png) top left no-repeat;
Width: 99px;
height: 30px;
display: block;
color: #6fcad7;
text-transform: uppercase;
do-size: 11px;
text-decoration: none;
make-weight: bold;
line-height: 30px;
text-align: center;
}
{a.learnmore:hover}
Background: url (.. / images/learnmorebtn.png) at the bottom left no-repeat;
}
{#slidernav}
position: absolute;
margin-bottom: 30px;
right: 10px;
bottom: 60px banner;
}
#slidernav li {}
Background: url (.. /images/dot-OFF.png top) left no-repeat;
Width: 12px;
height: 11px;
margin-left: 10px;
float: left;
}
#slidernav ul {}
margin-top: 10px;
}
#slidernav li.doton {}
Background: url (.. /images/dot-on.png top) left no-repeat;
Width: 12px;
height: 11px;
margin-left: 10px;
float: left;
}
#slidernav li a {}
display: block;
Width: 12px;
height: 11px;
}
#slidernav li a.the {}
Background: url (.. /images/dot-on.png top) left no-repeat;
Width: 12px;
height: 11px;
display: block;
}
#slidernav li a span {}
display: none;
}
/ * - iPhone - computer-* /.
{#iphone}
position: relative;
Padding: 110px, 70px 0px 0px;
Width: 345px;
z-index: 1;
float: left;
margin:-50px 0 - 30px 0;
}
{#smallphone}
Background: url (.. / images/smallphone.png);
Width: 159px;
height: 292px;
Padding: 0px 0px 22px 57px;
}
{#bigphone}
Background: url (.. / images/bigphone.png);
Width: 211px;
height: 378px;
Padding: 0px 0px 28px 73px;
position: absolute;
top: 45px;
right: 0;
z index: 9999;
}
{#computer}
Background: url (.. / images/computer.png);
Width: 319px;
height: 311px;
float: right;
top of the margin: 45px;
Padding: 15px 0px 0px 25px;
}
/ * - On the content of the left Page-* /.
{#leftcontent}
Width: 680px;
overflow: hidden;
float: left;
}
{.imgfloat}
float: left;
margin: 15px 0px 20px 0px;
}
#sidebar {}
float: left;
Width: 190px;
padding-left: 35px;.
margin: 10px 0px 0px 725px;
Background: url (.. /images/Color-vertical-div.jpg top) left on repeat-y;
position: fixed;
}
{.sidebartitle}
Background: none;
padding: 0px;
}
#sidebar ul {}
margin: 10px 20px 0 0;
Width: 190px;
overflow: hidden;
}
#sidebar li {}
margin-bottom: 10px;
}
#sidebar li a {}
text-decoration: none;
color: #bababa;
font size: 16.5px;
}
#sidebar li a: hover {}
color: #ffffff;
}
{.sidebaron}
color: #ffffff! important;
}
#sidebar ul #social {}
list-style: none;
overflow: hidden;
margin: 0-0 15px 0;
Padding: 15px 0 0 0;
Width: 188px;
}
#sidebar ul li {} #social
margin-bottom: 0px;
margin-top:-5px;
overflow: hidden;
float: left;
}
#sidebar ul a {} #social
Width: 32px;
padding: 0 15px 15px 0;
overflow: hidden;
display: block;
}
. Clear {}
Clear: both;
}
purchase online .slider {}
height: 449px;
}
/ * - Down content-* /.
{#bottomcontent_wrap}
Background: url (.. / images/bottomcontentbar.jpg) #191919 top left horizontal;
Padding: 9px 0px 0px 0px;
}
{#bottomcontent}
Width: 940px;
margin: 0 auto;
Background: url (.. / images/bottomcontentbg.jpg) #191919 top left no-repeat;
overflow: hidden;
padding-top: 30px;
}
.the .middle, {.right
float: left;
Width: 250px;
}
.the {}
padding-right: 20px;
Background: url (.. /images/Dark-vertical-div.jpg) top right repeat-y;
}
.the ul {}
margin: 5px 0px 0px 15px;
}
. Li {}
color: #ffffff;
list-style: circle;
low-margin: 7px;
}
{.middle}
padding: 0px 55px;
}
. Right {}
float: right;
padding-left: 55px;
Background: url (.. /images/Dark-vertical-div.jpg top) left on repeat-y;
}
/* ---------- Contact ---------- */
#container ul li.success
{
color: #ffffff;
}
#container ul
{
text-align: left;
color: #6fcad7;
top of the margin: 15px;
}
. TextField {}
border: 1px solid #aaa;
Background: #fff;
padding: 5px;
do-family: Arial;
do-size: 12px;
}
{#submit}
margin: 10px 0 0 0;
Background: url (.. / images/learnmorebtn.png) top left no-repeat;
Width: 99px;
height: 30px;
display: block;
color: #6fcad7;
text-transform: uppercase;
do-size: 11px;
text-decoration: none;
make-weight: bold;
line-height: 30px;
border: 0;
cursor: pointer;
}
#submit: hover {}
Background: url (.. / images/learnmorebtn.png) at the bottom left no-repeat;
}
. Entry-block {}
margin: 20px 0 0 0;
padding: 0 0 20px 0;
Background: url (.. bottom of horizontal /images/horizontal-Divider.jpg);
overflow: hidden;
}
. Thumb img {}
border: 3px solid #cfcfcf;
}
purchase online .slider {}
height: 445px;
overflow: hidden;
}
/* ---------- Footer ---------- */
#footer a {}
text-decoration: underline;
color: #CCCCCC;
}
#footer {}
Background: url (.. / images/footerbg.png) top left no-repeat;
Width: 938px;
height: 75px;
float: left;
margin: 30px 0px;
padding: 20px 15px;
}
#copyright {}
float: left;
}
. Copy {}
margin left: 55px;
}
{.smalllogo}
padding-top: 5px;
float: left;
}
.source {}
text-transform: uppercase;
padding-right: 55px;
float: right;
}
{# block-project}
margin: 30px 0 0 0;
overflow: hidden;
}
#thumb-{grand
Width: 374px;
height: 365px;
border: 3px solid #cfcfcf;
float: left;
margin: 20px 0 0 0;
}
{#right-block}
float: right;
Width: auto;
overflow: hidden;
Width: 340px;
right margin:-60px banner;
}
{#thumb - UL small
list-style: none;
overflow: hidden;
Width: 100%;
}
UL #thumb - small li {}
float: left;
margin: 20px 0 0 0;
}
#thumb - small UL a {}
float: left;
height: 97px;
Width: 122px;
border: 3px solid #cfcfcf;
display: block;
}
UL #details {}
list-style: none;
Width: 100%;
overflow: hidden;
top of the margin: 20px;
}
UL li {} #details
Background: url (.. / images/bullet.gif) no repeat 1px 0;
height: 36px;
padding: 0 0 0 30px;
}
/ * Cursor * /.
.stripViewer .panelContainer .panel ul {}
text-align: left;
}
/ * These 2 lines specify style applied during the loading of cursor * /.
. CSW {width: 100%; height: auto; overflow: hidden ;}}
. CSW .loading {margin: 200px to 300px 0 0; text-align: center ;}}
.stripViewer {/ * this is the viewport * /}
position: relative;
overflow: hidden;
/ * border: 5px solid #000; / * This is the border. must have the same value for the links * /.
margin: auto;
Width: 940px; / * Specified also in .stripViewer .panelContainer .panel below * /.
height: auto;
Clear: both;
/ * background: #fff; * /
}
.stripViewer .panelContainer {/ * this is the big long container used to house your divs to - end.} Width is calculated and indicated by the JS * /.
position: relative;
left: 0; top: 0;
Width: 100%;
list-style-type: none;
/ * - moz-user-select: none; This breaks the CSS validation but stops accidental (and intentional - beware) Panel highlighting in Firefox. Some people might find this useful fools, fool. */
}
.stripViewer .panelContainer .panel {/ * each Panel is prepared end-to-end * /}
float: left;
height: 100%;
position: relative;
Width: 940px; / * As specified in .stripViewer above * /.
}
.stripViewer .panelContainer .panel .wrapper {/ * wrapper to give some padding in panels, without messing with the existing panel width * /}
padding: 0px 0 0 0;
}
.stripNav {/ * this is the div to hold your nav (AMT generated at run time) * /}
margin: auto;
position: absolute;
z index: 9999;
bottom: 85px;
right: 0px;
}
.stripNav ul {/ * generated automatically links * /}
list-style: none;
}
.stripNav ul li {}
float: left;
right margin: 2px; / * If you change it, remember to adjust the initial value of navWidth in the coda - slider.1.1.1.js * /.
height: 11px;
Width: 12px;
}
.stripNav a {/ * the nav links * /}
font size: 1px;
text-align: center;
Background: url (.. /images/dot-OFF.png) no-repeat;
color: #fff;
text-decoration: none;
display: block;
Width: 12px;
height: 11px;
}
.stripNav Li a: hover {}
Background: url (.. /images/dot-on.png) no-repeat;
}
.stripNav li a.the {}
Background: url (.. /images/dot-on.png) no-repeat;
color: #fff;
overflow: hidden;
Width: 12px;
height: 11px;
}
.stripNavL, .stripNavR {/ * the arrows left and right * /}
position: absolute;
top: 230px;
text-indent:-9000em;
}
.stripNavL a, .stripNavR a {}
display: block;
height: 40px;
Width: 40px;
}
{.stripNavL}
left: 0;
}
{.stripNavR}
right: 0;
}

I figured out how do. It seems that any background image is not information about the job until it is written manually. This line seems to do the trick.

position: 200px;

Orcle ADF: Background Image of panel group put on the page is not getting displayed in stubborn browser task-flow

Hello I'm developing a web application using ADF (jdeveloper 11.1.2.4). I have a template that I have panelGroupLayout. I put a background image for the grouplayout. And I created a test.jsf page from this template. When I run this page directly background image is displayed in the browser. I put this page in a stubborn taskflow. My problem is when I execute this page of the stubborn taskflow background image is not displayed.
Image is displayed for this URL: http://127.0.0.1:7101/EasyRUN-ViewController-context-root/faces/login?_adf.ctrl-state=1px1s1o6o_26
Image is not posting to this URL: :7101/EasyRUN-ViewController-context-root/faces/admin-flow-definition/homePage?_adf.ctrl-state=1px1s1o6o_29 http://127.0.0.1
Please help me. Thanks in advance.

The part of the url of the background image is the problem, probably

As first of all, try to assign relative to your location of workflow, for example:

background-image: url("..) ("/ ERUnBPart2.png")

just to see what happens

CFDOCUMENT - only the first PDF has the background image displayed in a loop

Here is the code example. The first PDF is created very well, but the rest files lack background image. Similar problem was reported here very strange CFDOCUMENT Bug | Blog of Raymond Camden, but I could not find a solution to this problem. Would appreciate any input!

< cfloop query = "MyQuery" >

"< cfdocument format ="PDF"filename="./docs/#filename# ".

Overwrite = "yes".

localURL = "true" >

< ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / IN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > ""

< html >

< head >

< style type = "text/css" >

body

{

background - image: URL('image.jpg');

background-repeat: repeat no.;

}

< / style >

< / head >

< cfoutput >

< body >

< table width = "100%" cellpadding = "0" border = 0 >

< b >

< height td = "280px" colspan = "4" > < table >

< /TR >

< tr valign = "top" >

< td align = "center" colspan = "4" >

< span style = "do-size: 48;" do-family: Calibri; color: black; make-weight: bold; ">

#FirstName # #LastName #.

</span > < br >

< span style = "do-size: 25;" do-family: Calibri; color: black; make-weight: bold; ">

for the

</span > < br >

< span style = "do-size: 48;" do-family: Calibri; color: black; make-weight: bold; ' > '.

project #qNomination.proj_name #.

</span >

< br >

< table >

< /tr >

< / body >

< / cfoutput >

< / html >

< / cfdocument >

< / loop >

The example I gave you would work. It's just dynamic as I'll now show.

In the following example, save CFM 2 files and image files in the same directory. Then open testFile.cfm in the browser. This will dynamically create 3 PDF files in the current directory

testFile.cfm

Inc.cfm

Content of body HTML of the page #idx. #

Faced with centered Background Image

I have the code that I found always give me a background focused on a screen image. It is based on the ideas presented here:

http://supportforums.BlackBerry.com/T5/Java-development/MainScreen-explained/Ta-p/606644

However, the code does not, at least not for me.

I tried other variations as well, as the addition of another not VFM of scrolling, then adding data scrolling to the optimization of resources, but even this indirection suffers from the same problem. Have two screenshots to show, the 'exclamation' should be at the centre according to me!

Code follows.

To illustrate the problem, just space out the field change with "entry" for more complete screen.  Then the same thing to one below the Bitmap and then scroll and down using the trackpad. I suspect that you will see the problem.

I saw this on OS 6.0 and 7.0 OS simulators. Not tested on OS 5.0 and tested only on touchscreen devices. I'll do some more tests later.

Someone at - it suggestions on the subject of how we get the "centered" background Bitmap actually stay in the Center will still let me add lines to my editfields and scroll using the trackpad?

Net.rim.device.api.system import. *;
Net.rim.device.api.ui import. *;
Net.rim.device.api.ui.component import. *;
Net.rim.device.api.ui.container import. *;

/**
* A screen class to test background bitmap images.
*/
SerializableAttribute public class BackgroundImageScreen extends screen
{
private int backgroundColor = 0x00FF0000;
private bitmap _backgroundBitmap = Bitmap.getPredefinedBitmap (Bitmap.EXCLAMATION);

Constructor
public BackgroundImageScreen()
{
Super(Manager.USE_ALL_WIDTH |) Manager.USE_ALL_HEIGHT | Manager.NO_VERTICAL_SCROLL | Manager.NO_VERTICAL_SCROLLBAR);
setTitle (new LabelField ("Background Image Demo"));
VerticalFieldManager backgoundManager = VerticalFieldManager(Manager.USE_ALL_WIDTH | nouveau Manager.USE_ALL_HEIGHT |) Manager.VERTICAL_SCROLL | Manager.VERTICAL_SCROLLBAR) {}
{} public void paintBackground (Graphics g)
int currentVackgroundColor = g.getBackgroundColor ();
try {}
g.setBackgroundColor (backgroundColor);
g.Clear ();
} {Finally
g.setBackgroundColor (currentVackgroundColor);
}
int managerWidth = this.getWidth ();
int managerHeight = this.getHeight ();
centerX = int (this.getWidth () - _backgroundBitmap.getWidth (()) 2.
centerY = int (managerHeight - _backgroundBitmap.getHeight ()) 2.
System.out.println ("current position:" + Integer.toString (centerX) + ":" + Integer.toString (centerY) +)
", Far manager:" + Integer.toString (managerWidth) + ":" + Integer.toString (managerHeight) + "."
", Manager virtual:" + Integer.toString (this.getVirtualWidth () + ":" + Integer.toString (this.getVirtualHeight () + "."
", ManagerScroll:" + Integer.toString (this.getHorizontalScroll () + ":" + Integer.toString (this.getVerticalScroll ())); "."
g.drawBitmap (this.getHorizontalScroll () + centerX, this.getVerticalScroll () + centerY, _backgroundBitmap.getWidth (), _backgroundBitmap.getHeight (), _backgroundBitmap, 0, 0);

}
};
backgoundManager.add (new EditField ("scrolling test:", "Enter the text here to scroll"));
backgoundManager.add (new SeparatorField());
backgoundManager.add (new BitmapField (Bitmap.getPredefinedBitmap (Bitmap.QUESTION)));
backgoundManager.add (new SeparatorField());
backgoundManager.add (new EditField ("test an another parchment:", "Enter the text here to scroll"));
This.Add (backgoundManager);

}
}

Ahh, touch screens...

I remember I had to invalidate the Manager paint extra stuff (vertical scroll bar in my case) in scrollChanged() specifically for touchscreen devices. So one thing to try is to implement ScrollChangeListener in your main screen or your added VFM and invalidate the VFM in scrollChanged. This should fix the problem, even if it will be a drop in performance.

I suspect that the touchscreen devices have certain graphic hardware acceleration, which makes them more effective when scrolling but it lacks what BlackBerry stuff framework is not aware (for example your paintBackground according to the positions of scrolling).

I'm curious to know what happens if you use setBackground on a scroll, no Manager and add the scroll with no bottom paint on top of it. setBackground, being a built-in could make better use of their hardware acceleration.

background image problem

Hi, I have a strange problem with my project, I have a background image JPG (271 k) set as the background of my front (option in the Center), if I load the VI this race 6-7 cycles per second in a loop of cheating, but if I VI and put the background image to NONE, and after that, I have re - adjust my image as a background and run the vi it run at 20-25 cycles per second It's so crazy... I can't understand this is possible and I'm going crazy trying to solve this problem.

Problem with background Images and scrolling

I had to face for a while to get background pictures are working properly. Here's what I do:

VFM VerticalFieldManager = new VerticalFieldManager();

Card of bitmap = Bitmap.getBitmapResource ("MyImage.jpg");

Background bg = BackgroundFactory.createBitmapBackground (map);

vfm.setBackground (bg);

This works, but has entrapment. First of all, he painted only as much as you have fields too much room, so I have to add empty fields just to occupy vertical space. However, on a page with something like a listField, where the height is variable, this can lead to what the background image are starting to repeat and to allow scrolling.

What I want to do is to block all the scrolling and have the training exactly fill the screen with no scrolling or white empty places.

I'll just on this wrong? Would really love to help...

Hello

Hope this will help you.
```
class LoginScreen extends MainScreen {    //Manager        private VerticalFieldManager _manager;

    LoginScreen() {        //Set Background image            _manager = (VerticalFieldManager)getMainManager();            Background bg = BackgroundFactory.createBitmapBackground(Bitmap.getBitmapResource("back.png"));            _manager.setBackground(bg);

   }}
```
Add this manageron your screen don't add any component in this handler.

You add fields in the Manager of the other, and adds that the Manager on the screen.

Let me know if this solves your problem or not.

I'm having a problem using the slideshow module in LR 6.3. The slideshow contains the background image as one of the images to display. Earlier, I had created a slideshow of practice and the background image was not displayed as an image in itself. How to

I'm having a problem using the slideshow module in LR 6.3. The slideshow contains the background image as one of the images to display. Earlier, I have created a slideshow of practice and the background image was not displayed as an image in itself. How to make it behave?

Another approach, perhaps a little more elegant (?). Create a collection that includes images for the slideshow. Include the background image in the collection. Drag the background image in the Panel to designate. Then, remove this image from the collection and create the slide show. I just tried and it works, too.

Border problems with background image

Hello
I have a problem with my background image. I have fillings of browser size the original value and activated scale option in the middle. The image has a resolution of 1920x1080px. But when I now change the size of my browser I get a white border on the left or on the right size.

Small to large size of Office Office:
https://DL.dropboxusercontent.com/u/84237067/kleinzugross.PNG
Large size of small office desktop:
https://DL.dropboxusercontent.com/u/84237067/grosszuklein.PNG
Hope you understand me, my English for this specific part is not perfect it.
Greetings
Marcel

I checked out the site but don't see any white space on the page with large screens, I think that you have already solved the problem?

Thank you

Sanjit

Background Image problems

Hi all
I'm having some problems downloading from my site and the background image appears does not (shock).
When you view the site live design and chrome/ie/Safari, the site appears as I want it, but when I upload the site the background image does not appear.
Here is the link to my site: www.charcombeandwills.com

Your server is case-sensitive

http://www.charcombeandwills.com/fullbg.jpg

Change fullbg. JPG to fullbg. jpg

Problem Background Image
Hello
I'm using a custom theme in APEX 4.0 on Oracle 10 g. I'm trying to add a background image to a page, and I find that the theme does not appear the image correctly. I need to click on the background image view to see the actual image...

I know there is a way through css to override the existing background image/color, but today I simply didn't see / get it...

Can anyone offer a suggestion?

URL: http://enciva3.com/apex/f?p=132:1:1127045783946322 (page rough to demonstrate the point).

Thank you

Tony Miller
Webster, TX
Tony

The background properties are applied to the body according to your stylesheet incorporated. The problem is that the body is invisible behind all this fancy theme UI widgets dan.

Various s divon the page have styles online specifying absolute positions and z-index values that display them in front of the body of the page and have the .ui-pane-layout class that specifies the gray background. Override this rule with:
```
.ui-layout-pane {
  background-color: transparent;
}
```
and the body with your background image becomes visible.

On the other hand, put the background image on the main content div can be closer to what you're trying to achieve? Replace the body selector in your existing rule by div #delta - content of the page:
```
div#delta-page-content {
  background-image: url(wwv_flow_file_mgr.get_file?p_security_group_id=9023722216290979&p_fname=ata_background.png) !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}
```

Background image in IE6 display problem

I have another problem with my CSS. It includes background images don't display correctly in IE6. My navigation bar is an unordered list, and I use a technique of image replacement to replace the text for background images that serve as buttons. The height of each button is 12 pixels, and turnover is created by shifting the pixels of the image-12 to reveal the bottom of half of the image. So far so good. The images appear in all browsers but IE6 displays more than 12 pixels of the image, revealing part of the bearing underneath.
Here is the page in question: http://www.colbydesign.com/redesign/index.html
Here is a page of BrowserLab of the appearance of the page in IE6: http://www.colbydesign.com/redesign/images/ie6_screenshot.jpg
The < ul > height and the height of the image are set to 12 pixels. I can't understand why IE6 has a problem with the CSS. Maybe there is a hack in IE6 that I can use? Any help would be appreciated.
Thank you
R Co

I didn't have the chance to work through the problem set, but I think that the font size of your text in menu "off-screen" pushes down on the size of your ul and your li, as I see the contours 'spill over' into this div. specific

Try those giving the #header h1 elements, specifically, set a smaller font size.

Otherwise, try to apply a "overflow: hidden;" to the definition of hover.

Beth

Problem with the length of the background Image

I created a page with a sidebar and main content where to cut a picture to try to get consistency for the bottom of each element.
When I view in the Explorer of the Int, it can show different lengths between the two elements to let appear a blank space at the bottom of the screen. Problem does not occur in love with Safari or Firefox
See the page here as an example http://revamp.pnnmanagement-events.co.uk/bands & duos.html
In IE6, it also seems to put a space between the sidebar and the main content, which does not happen elsewhere.
Any ideas on how to fix thanks.
Ian

Why do you split the image? Can not make you a wrapper for the sidebar and the maincontent and set the background image of the packaging to your image. In this way, your image doesn't have to be cut in half...

Menu Spry, problems with background images in Internet Explorer

Hello
Looking for help from someone more qualified than me with some menus spry. I have problems with background images don't show is not for some of my items menu in Internet Explorer. Safari and firefox seem to accept it's ok.
Here is a link to the menu: http://www.scottbrownwebdesign.com/beta/HTML/index.html
and here is a link to the spry .css: http://www.scottbrownwebdesign.com/beta/HTML/SpryAssets/SpryMenuBarHorizontal.CSS
I know that these are the elements that have the drop down or the side of the arrows. I can't have two background images that I can?
Thanks in advance,
-Scott

My first thought...
```
                     display: inline;          f\loat: left;          background: #FFF;

Try declaring the background-image here as well... where it says not to mess with unless you know what you are doing.

I'm just guessing though. If I had more time I'd look into it further but I do not.
```

background images of centering problems

Similar Questions

Maybe you are looking for