incongruous div background image?

Here is the link to my test page:

http://nandigital.com/test/include/style.CSS (I also comment on what makes every part of the css)

I'm currently building a website from scratch, which consist of a difficulty of background image and the div background images 2 sit in the Middle (as html does not allow me to add more background in the body...).

It has been tested last version of IE, firefox and chomre and on the different, all screen resolution correctly rendered.

But as soon as I try to resize the window jumping of clutter and not solitary repetitive background work...

Advice please help and thanks in advance. =)

It seems that you are doing it correctly. The new

to completely wrap the "outerContainer' (see below).

Remove the bottom before the closing tag you don't need.

Then, apply the repeating background:

{#pageWrapper}

Background: url (.. /images/Red-background.png);

background-repeat: repeat-x;

background-position: 100px 0; / * Use background-position to place the image to be * /.

}

Tags: Dreamweaver

Similar Questions

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;

Difficulty in div background image

Hello
I did a lot of research on this subject and answers os tons were developed, yet, none has solved my problem so far.
I'm doing the background image in a div that will be fixed when I scroll vertically.
Have a model manufactured, in which the only editable div is the rightdiv. (in red, to be easier)
Here is my code
CSS
{body
margin-top: 0px;
margin-bottom: 0px;
background-position: Center;
background-image: url (.. / Images/bgdr.jpg);
background-repeat: no-repeat;
}

{#wrapper}
height: 875px.
Width: 1000px;
margin-right: auto;
left margin: auto;
background-repeat: no-repeat;
#header {}
background-repeat: no-repeat;
Clear: none;
float: none;
height: 214px;
Width: 1000px;
background-image: none;
position: relative;
padding-top: 10px;
{#leftDiv}
Clear: none;
float: left;
height: 500px;
Width: 245px;
position: relative;
text-decoration: none;
}
{#rightDiv}
Clear: none;
float: right;
height: 484px;
Width: 755px;
position: relative;
overflow: auto;
}
#footer {}
height: 100px;
Width: 1000px;
Clear: both;
position: relative;
padding-bottom: 20px;
}
And here is my HTML code
<!-InstanceBeginEditable name = "RightDiv"->
< div id = "rightDiv" style = "background-image: url(Images/informacao.png)" >
< / div >
<! - InstanceEndEditable - >
Well, it's that on Internet Explorer 9, the background image repeats vertically when I scroll vertically. On Chrome it will stay fixed on parchment (and that's what I want).
I tried to add style = "" background-attachment: fixed ", but that branding will match difficulty itself relatively to the entire page, not the div only." In addition, she repeats 4 times for oocupy the screen. I can solve that by "no-repeat", but it is always attached to the browser page, not of the div.
I tried to solve this problem for days... Help would be very appreciated.
Funny is that this only happens in IE9... Chrome works perfectly.

After a little research, I found it's actually "mode of operation" in Internet Explorer, all versions. A fixed background image goes out the window of the browser for positioning.

The work around is to place a div container around the div scrolling. Place the background image in this div without css positioning container or an attachment and turn off a background image or color in div scrolling.

Something like that...

your content here

Style DIV background image appears not

Hey friends - can take anyone a peek at line 136 to show why my background image does not appear in this DIV Style?
http://www.gratefulcreative.com/Andre_Madiz/index.html
Thanks in advance!
Ken d
Creative Director
grateful creative
www.gratefulcreative.com

You have no width or height defined for this item, so it cannot show an image, unless you make the div at least the same size as the image.

http://www.gratefulcreative.com/Andre_Madiz/images/bottom_text.PNG); repeat ba ckground: No.-repeat; Width: 871px; height: 483px; » >

You can also consider adding to your main css file and giving the div an id that will help you in the future.

The div background image in the process of disappearance in the product page of model

Hello
I created a Web page using css and DIV tags I created an editable region that has a background in her image. Within this editable area there are a couple of ther tags div too. When I look at the page as a template, it looks fine, but when I produce a new page of this model, the background image disappears?

Can anyone help with this?
Thanks in advance.
Andy

What file name is the background image? The path is correct?

Div background image clipping
Hi guys,.
I have a div on my page which I use as the main body, and I put the color of white background, but then put on a background image (a gradient of grey to white). In design mode, this has the desired effect - i.e. it seems to be a long gradient, but when you preview in Firefox and IExplorer top of the background image is cut off. Any suggestions?
Here are the relevant CSS:

> background-attachment: fixed;

Delete this.

--
Murray - ICQ 71997575
Adobe Community Expert
(If you * MUST * write me, don't don't LAUGH when you do!)
==================
http://www.projectseven.com/go - DW FAQs, tutorials & resources
http://www.dwfaq.com - DW FAQs, tutorials & resources
==================

"DECLARED" wrote in message
News:fp7nje$NKA$1@forums. Macromedia.com...
> Hi guys,.
> I have a div on my page which I use as the main body, and I put the
> white background color, but then put on a background image (a gradient
> of
(> gray to white). In design mode, this has the effect desired - that is, it
> seems
> be a long degraded, but when the top Preview in Firefox and IExplorer
> of
> the background image is cut off. Any suggestions?
> Here is the relevant CSS:
>
>
> background-attachment: fixed;
> background-color: #FFFFFF;
> background-image: url(Images/background.png);
> background-repeat: no-repeat;
> background-position: top center;
>

DWCS4 behavior of the effects appear with DIV background image?
Is it possible to use the effects appear on the background image in a DIV with the command 'OnLoad '. I want my banner to fade in (param) when the page is reached.
It's the tag with that I want to use the above behavior:
< div class = "dwBanner" > < / div >

Thank you very much.
www.dwdallam.com
...

Background image different (div) on every page of the site complicated by model

Hope I can explain this: here are the details
-With the help of Dreamweaver cs5.5
-Make a model pages.
-Each page will have a different background image; but the image is contained in a div tag (name of the div is .mainbackground) happening behind the main core of the site, the image is not in the < body >
-The .mainbackground div is EDITABLE
-J' already have a css specific class to assign to this div on each page, so that the image is different on each page.
-On the template page, the .mainbackground div has no class assigned image (so no background image)
-Because this div is editable I can then go into each page and set it to the desired - image class works very well. Except that... and this is my main question:
-In the code, all other regions are listed IN THIS above mentioned div of .mainbackground SO that means that:
-If I need to update the structure of the pages I have to remove the editable area that controls the background image that would be - remove editable .mainbackround area. Then go back to my template, make changes and save everything - so any changes will carry through to my other pages. It's good and bad, because I'd get all the structural changes, but I also let go of all the text specific to these pages.
- Then when I'm finished I have to go back and first add a combo box to the .mainbackground class and then reapply the background to the .mainbackground classes to fix the images on the pages again...
The site is very small so I can deal with it, but I'm going about this all wrong?

Is there a template feature that I don't get? I would like to continue using the template feature, and I don't want a different photo on each page...
I've attached a picture showing a page that you can see the background image - which will be different on each page.

So the next solution does not change the CSS if necessary? :

What is the way to place a background Image in a Div?

I searched Google and Adobe forums for a while now, and although there are very valid solutions for similar problems I discovered that none of them fixed the problem that I am facing. I blame myself and get lost in this encoding sloppy mine, so part of my plan was to start my stylesheet from scratch.
My question, what is the right way to add a background image in a div? I currently have the div albums following the css style "header", here's what I typed in this section:
< style type = "text/css" >
@import url("..) ("/ twoColLiqLtHdr.css");
. Header {}
Width: 1000px;
height: 300px;
background-image: url(Assets/HeaderTemplate.png);
background-repeat: no-repeat;
background-position: center;
}
The problem here is that the background image is not still appear. I would appreciate help, could someone inform me on how to do this so that I can implement images in div in the future without turning my coding in a bottom right mess?
Thank you in advance.

Try changing it to:

background-image: url('Assets/HeaderTemplate.png');

Also make sure you have the case appropriate for file names: for example

Assets = active

HeaderTemplate = headertemplate

etc etc.

Sometimes these things create problems.

Good luck.

Make a background image of a DIV elastic?

I try to get the background image of one div to resize when the browser text display rises or falls.
There's a big announcement at http://jontangerine.com/silo/css/elastic-layout/ which gives many details on the layouts of elastic and addresses resizing of the images on the page to see his example in http://jontangerine.com/silo/css/pixels-to-ems/
However, it has not worked for me when I tried to apply it to the background image. Anyone know the code for this?
Thank you.

egigharbor wrote:

Zoom the page without problem - it is the text based on the browser does not accept my image to enlarge proportionally sizing. I know that there is a way because I tried on http://jontangerine.com/silo/css/pixels-to-ems/ and its images increase with the text.

For some reason I struggled to make it work in my banner.

OK... you're asking for trouble and opening a Pandora's box... but what you can do is insert the image and remove the width and height attributes. To resize the image as page zoom in and out... willingness to work in some browsers, not all (eg. works in FF, but not IE6). Be aware though that, as the image magifies, rasterization will be put in... zoom isn't so bad... like compresses just of the image.

background image fill div, text with padding

I have a div that is put in place with a width of 182px and the padding is T:15 R:10 B:15 L:20. The text in the div tag with these settings, but when I add my background image (a color bar), also works 182px, it does not fill the div, only about 75% of it. I learn that I will, any advice would be appreciated.

gregjb wrote:

I have a div that is put in place with a width of 182px and the padding is T:15 R:10 B:15 L:20. The text in the div tag with these settings, but when I add my background image (a color bar), also works 182px, it does not fill the div, only about 75% of it. I learn that I will, any advice would be appreciated.

A fill is added to the dimensions of the
. If your
is really wide 182px more padding to 30px left and right = 212px

If your background image should also be wide 212px.

HOWEVER, if you do not want that your
to be only 182px wide value 152px width wide to hold account of padding.

Background image in a div?
I know how to use css to place an image of background inside a div. However, I want to be contextual and differrent depending on what the current page is that image. As a hypothetical example, I would like a background image of an Apple inside, no repetitive < div class = 'content' > when the apples.html of the page is open, but then a picture of a banana would be the background image inside < div class = 'content' > for bananas.html.

If there is a way to place background images on the fly, directly in the html code, it would be the best solution for this novice.

Thanks for any help!

r
Do it this way-

(This put in the head of each page (or put rules in a whole site)
external style sheet)

Now, on the Apple page, change it.

on this subject.

and on the page of bananas, change it to-

Get it?
--
Murray - ICQ 71997575
Adobe Community Expert
(If you * MUST * write me, don't don't LAUGH when you do!)
==================
http://www.projectseven.com/go - DW FAQs, tutorials & resources
http://www.dwfaq.com - DW FAQs, tutorials & resources
==================

"MEPE" wrote in message
News:ffqvhs$5q6$1@forums. Macromedia.com...
> Thank you!
>
> I will he give a try. I'm Googling for tutorials on this subject, but if anyone
> has one in their pocket that will allow them to share, very much appreciated.
>
> r

background image in a div that resizes to the size of the mobile browser in jquery

I want to place a background image in my area of content using Jquery mobile, but I want image re - happen to the size of the browser and different devices. How could I go about this?

jQuery Mobile essentially is a one page site. Background gradients are determined by the jQuery Mobile theme do you use (a, b, c, etc...). I don't know if it is possible to use a scale with jQMobile. I have never tried. But you can find the code in your Theme.css file. Look for the ui-body-a, b-body-ui, ui-body-c, depending on the theme you are using.

Nancy O.

How can I show a background image with a variable?

I try to explain it:

I have a div called "entrante1_ctn" that must contain a background image. This code works, but I don't want to do...

sym.getComposition () .getStage ().getSymbol("entrantes_sym").$("entrante1_ctn").css ('backgro undImage','url(images/entrantes/entrante1.png)');

I would like to the somtehing like that...

sym.getComposition () .getStage ().getSymbol("entrantes_sym").$("entrante1_ctn").css (' undImage ',' url backgro ( variable )');

The variable is a table element, but this code does not work:

sym.getComposition () .getStage ().getSymbol("entrantes_sym").$("entrante1_ctn").css (' undImage ',' url backgro ( ent_1 [0] )');

Please, helpp!

Hi or Hello,
- The principle( general case) ==> .css ("background-image ',' url(images/myImage.png)'");
- With a variable (a variable):
var image = "images/myImage.png ';

. CSS ("background-image", "url (" + image +') ');
- Your particular case (your case) ==> .css ('background-image', ' url ('+ ent_1 [0] + ')');

Why google chrome is move my fixed background images?

I fixed the background images on my site that work well on all other browsers, but for some reason, they do not appear on Chrome, but if you click on the div they appear, or if you browser to scale also become it visible.
"< a href="Pages/Downlighters/Aleda.html ">
< div class = "cd cd-set-bg-bg-1" >
< h5 style = "margin-left: 10%;" padding-top: 20%; font size: 4 rem; Color: black; ' > Aleda < / h5 >
< / div > <!-cd-set-bg-> < /a >
< div class = "cd-scroll-bg-color-2 cd" >
< div class = "container-cd" >
< a href = "infinite/systems - Infinitas.html" > < div class = "IndexProductFull" > < img src = "Images/infinite - Product_Overview.png chart/product/infinite" >
< h3 style = "do-size: 4 rem;" > < color '# 2793 3' = >
Introduction < span id = "third" > </span > infinite
< / police > < / h3 >
< p > < / p >
< style p = "" text-align: center; "> < font color ="white"> Intelligent Innovation, Inspirational illuminance < / police > < / p >"
"< a href="Pages/Infinitas/Systems-Infinitas.html "class ="learn"> learn more < /a >
< / div > < /a >
< / div > <!-cd-container->
< / div > <!-cd-scroll-bg->
CSS:
.cd-fixed-bg {}
position: relative;
min-size: 70%;
background-size: cover;
background-repeat: no-repeat;
background-position: Center;
z-index: 1;
}
. CD-set-bg h1, h2 .cd-fixed-bg {}
position: absolute;
left: 50%;
top: 50%;
bottom: auto;
right: auto;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o - transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
Width: 90%;
Max-width: 1170px;
text-align: center;
font size: 30px;
font size: 1.875 rem;
text-shadow: 0 1px 3px rgba (0, 0, 0, 0.3);
color: white;
}
.cd-fixed - bg.cd - bg-1 {}
background-image: url (.. / Graphics/index/cd-background-1.jpg);
}
. CD-fixed - bg.cd - bg-2 {}
background-image: url (.. / Graphics/index/cd-background-2.jpg);
}
. CD-fixed - bg.cd - bg-3 {}
background-image: url (.. / Graphics/index/cd-background-3.jpg);
}
. CD-fixed - bg.cd - bg-4 {}
background-image: url (.. / Graphics/index/cd-background-4.png);
}
@media only screen and (min-width: 768px) {}
. CD-set-bg h1, h2 .cd-fixed-bg {}
do-size: 36px;
}
}
@media only screen and (min-width: 1170px) {}
.cd-fixed-bg {}
background-attachment: fixed;
}
. CD-set-bg h1, h2 .cd-fixed-bg {}
font size: 48px;
Police-weight: 300;
}
}
.cd-scroll-bg {}
position: relative;
Padding: 2em 0;
line-height: 1.6;
box-shadow: 0 0 50px rgba (0, 0, 0, 0.5);
z-index: 2;
}
. CD-scroll - bg.cd - color-1 {}
background-image: url (.. /Graphics/Black-Linen.png);
}
. CD-scroll - bg.cd - color-2 {}
background-image: url (.. /Graphics/Black-Linen.png);
}
. CD-scroll - bg.cd - color-3 {}
background-image: url (.. /Graphics/Black-Linen.png);
}
. CD-scroll - bg.cd - color-4 {}
background-image: url (.. /Graphics/Black-Linen.png);
}
@media only screen and (min-width: 768px) {}
.cd-scroll-bg {}
Padding: 4 0;
font size: 20px;
font size: 1.25 rem;
line-height: 2;
Police-weight: 300;
}
}
What it looks like at first glance:
What it should look like:
Does anyone know why it would do that?
Here is a link to the site itself for you to see:
Home
See you soon,.

I have since solved the problem! Thank you!

			< h5 style = "margin-left: 10%;" padding-top: 20%; font size: 4 rem; Color: black; ' > Aleda < / h5 >
		< / div > <!-cd-set-bg-> < /a >

		< div class = "cd-scroll-bg-color-2 cd" >
			< div class = "container-cd" >

		< h3 style = "do-size: 4 rem;" > < color '# 2793 3' = >
		Introduction < span id = "third" > </span > infinite
				< / police > < / h3 >
				< p > < / p >

		< / div > <!-cd-container->
		< / div > <!-cd-scroll-bg->

incongruous div background image?

Similar Questions

Maybe you are looking for