Web Design Forums

buzybee · 28-05-2008, 17:08

I am trying to add not only a content background, but also a main background image. I tried stacking them with the z index, but I do not want the position to be absolute. Any suggestions? Still learning CSS so work with me

Thanks in advance for any help!!

(Need more info? Just smack me and ask

)

pgo · 28-05-2008, 18:07

I think you'll have to post an image so we know what you're talking about.

If you need 2 backgrounds, you need to elements to attach them to...

KarateRobot · 28-05-2008, 22:00

Yep, we will need to know more about what you want to achieve. The most common scenario would be something like this:

Code:

body{background-image:url('www.example.com/myimage.jpg')}
#content{background-image:url('www.example.com/anotherimage.jpg')}

Code:

<body>
  <div id="content">Some content here</div>
</body>

buzybee · 29-05-2008, 10:36

Thanks much!

Here is what I have so far...the content area has a background but it seems there is a separate area for the header. I have just confused myself. LOL

body {
background: #a78a9e url(images/content.gif) top center repeat-y;
color: #333333;
font-size: 11px;
font-family: Century Gothic;
margin: 0px auto 0px;
padding: 0px;
}

#wrap {
background: url(images/bg.gif) top center repeat-y;
color: #333333;
font-size: 11px;
font-family: Century Gothic;
margin: 0px auto 0px;
padding: 0px;
}

So basically what I want to do is have an image for the content area then have a background image for the overall site, but they won't seem to stack. One either replaces the other.

haku · 29-05-2008, 11:08

You probably need to declare a width for your #wrap. Assuming the only thing containing it is the body, right now it is extending to the full width of its container, which would be the whole width of the screen. That's why you can't see the body's background.

buzybee · 29-05-2008, 11:26

Brilliant! Thank you all so much for your assistance. I look forward to being around here and learning more! Cheers!!

Here is the final code I used:
body {
background: #a78a9e ;
background-image:url(images/bg1.jpg);
background-attachment: fixed;
color: #333333;
font-size: 11px;
font-family: Century Gothic;
margin: 0px auto 0px;
padding: 0px;
}

#wrap {
background: url(images/bg.gif) top center repeat-y;
width: 950px;
color: #333333;
font-size: 11px;
font-family: Century Gothic;
margin: 0px auto 0px;
padding: 0px;
}

28-05-2008, 17:08	#1 (permalink)
buzybee Registered User Join Date: May 2008 Posts: 13	CSS help-Two backgrounds on a blog I am trying to add not only a content background, but also a main background image. I tried stacking them with the z index, but I do not want the position to be absolute. Any suggestions? Still learning CSS so work with me Thanks in advance for any help!! (Need more info? Just smack me and ask )

28-05-2008, 22:00	#3 (permalink)
KarateRobot Registered User Join Date: May 2008 Location: Seattle Posts: 64	Yep, we will need to know more about what you want to achieve. The most common scenario would be something like this: Code: body{background-image:url('www.example.com/myimage.jpg')} #content{background-image:url('www.example.com/anotherimage.jpg')} Code: <body> <div id="content">Some content here</div> </body>

29-05-2008, 11:08	#5 (permalink)
haku shiro Join Date: Aug 2007 Location: Yokohama, Japan Posts: 2,007	You probably need to declare a width for your #wrap. Assuming the only thing containing it is the body, right now it is extending to the full width of its container, which would be the whole width of the screen. That's why you can't see the body's background. __________________ This space for rent.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

28-05-2008, 18:07	#2 (permalink)
pgo i'm done, son Join Date: Jan 2005 Posts: 12,262	I think you'll have to post an image so we know what you're talking about. If you need 2 backgrounds, you need to elements to attach them to...

29-05-2008, 10:36	#4 (permalink)
buzybee Registered User Join Date: May 2008 Posts: 13	Thanks much! Here is what I have so far...the content area has a background but it seems there is a separate area for the header. I have just confused myself. LOL body { background: #a78a9e url(images/content.gif) top center repeat-y; color: #333333; font-size: 11px; font-family: Century Gothic; margin: 0px auto 0px; padding: 0px; } #wrap { background: url(images/bg.gif) top center repeat-y; color: #333333; font-size: 11px; font-family: Century Gothic; margin: 0px auto 0px; padding: 0px; } So basically what I want to do is have an image for the content area then have a background image for the overall site, but they won't seem to stack. One either replaces the other.

29-05-2008, 11:26	#6 (permalink)
buzybee Registered User Join Date: May 2008 Posts: 13	Brilliant! Thank you all so much for your assistance. I look forward to being around here and learning more! Cheers!! Here is the final code I used: body { background: #a78a9e ; background-image:url(images/bg1.jpg); background-attachment: fixed; color: #333333; font-size: 11px; font-family: Century Gothic; margin: 0px auto 0px; padding: 0px; } #wrap { background: url(images/bg.gif) top center repeat-y; width: 950px; color: #333333; font-size: 11px; font-family: Century Gothic; margin: 0px auto 0px; padding: 0px; }

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)