PDA

View Full Version : More than one background image



twodayslate
Mar 27th, 2007, 04:39 PM
http://twodayslate.com/test/test.php
Here is the site, I want the dark blue to be at the bottom and the scales and the lighter blue at the top. I would need two background images to do this.

ahallicks
Mar 27th, 2007, 04:50 PM
So you want it how it is there? Why would you need two background images? I'm not understanding at all. Just create a large image that looks like that... then set the background colour to be the darker blue... then when the image stops the darker blue would continue??

twodayslate
Mar 27th, 2007, 04:54 PM
So you want it how it is there? Why would you need two background images? I'm not understanding at all. Just create a large image that looks like that... then set the background colour to be the darker blue... then when the image stops the darker blue would continue??



Ok right now, if there was content on the page and you had to scroll you would get all of the dark blue color. I want more scales.

http://images.twodayslate.com/design/backround2.gif repeat throughout and
http://images.twodayslate.com/design/background.gif repeat-x at the bottom

If this is not possible then I will find another way to style my site. this looks fine now, still interested if this works?


edit://
Why does
background: #1f3f9f url(http://images.twodayslate.com/design/background.gif) repeat-x bottom;not position the image at the bottom but hides it?

ahallicks
Mar 27th, 2007, 05:02 PM
No, you cannot have two background-images in the same place... the latter would simply overwrite the first. Sorry!

twodayslate
Mar 27th, 2007, 05:05 PM
No, you cannot have two background-images in the same place... the latter would simply overwrite the first. Sorry!Yeah.
I tried to put an image on the HTML tag but that did not work.

Thanks for your help!

ronaldb66
Mar 28th, 2007, 10:24 AM
An element, any element, can only have one background, whether you specify it with CSS (preferred) or with the--deprecated--HTML attribute (only for the body element, and discouraged).

To overlay two background images you'll need two nested elements, for example the body element and a main container element.

Excavator
Mar 28th, 2007, 06:05 PM
Yeah.
I tried to put an image on the HTML tag but that did not work.

Thanks for your help!

You can do that but you have to slide the next image, the body background, down so you can see the html background.
A little work in photoshop and I got this: http://www.nopeople.com/twoday/Redesign%20for%20twodayslate_com.htm You'll see in the CSS how I slid the one image down.


Have to remove the background color off body because it's the top one and a color there covers the html background. That make sense?
Put a color on html if your page is longer than the 2 images.