Support forums - Is it possible to have 2 background images stack on top of each other?????

Support forums » Products » Cute Live Support » Re: Is it possible to have 2 background images stack on top of each other?????

Is it possible to have 2 background images stack on top of each other?????

Last post 03-20-2009, 11:26 PM by WhatNow. 2 replies.


	Sort Posts: Previous Next

03-13-2009, 5:57 PM 49880

WhatNow
Joined on 03-10-2009
Posts 3

Is it possible to have 2 background images stack on top of each other?????

Reply Quote

Hi everyone! I have 2 background images. Both images are the same width. The top image has a decorative background to it but is divided into 2 colors and the 2nd one I wish to place under it and repeat y is 2 solid colors to match. I am trying to roughly duplicate the look of a site http://balihairesort.com/ which uses tables to achieve the effect and I have been nutting away trying to use CSS. Am I wasting my time? Can it be done? I have tried putting the image I want first in the html tag with a no-repeat and the image I want 2nd underneath but it displays the 2nd image. I cant put the 2nd image in the body tag as it is wider than the body tag and I have tried giving the html tag top paddings, top margins to allow for the 2nd image, all to no avail. If anyone knows how to do this technique I would be eternally grateful! Thx

03-14-2009, 1:57 AM 49884 in reply to 49880

Adam
Joined on 09-23-2003
Aurora, ON
Posts 18,678

Re: Is it possible to have 2 background images stack on top of each other?????

Reply Quote

Are you trying to achieve this?

Two background images On the Same Page

asp.net Chat http://cutesoft.net/ASP.NET+Chat/default.aspx
Web Messenger: http://cutesoft.net/Web-Messenger/default.aspx
asp.net wysiwyg editor: http://cutesoft.net/ASP.NET+WYSIWYG+Editor/default.aspx
asp wysiwyg html editor: http://cutesoft.net/ASP
asp.net Image Gallery: http://cutesoft.net/ASP.NET+Image+Gallery/default.aspx
Live Support: http://cutesoft.net/live-support/default.aspx

03-20-2009, 11:26 PM 50145 in reply to 49884

WhatNow
Joined on 03-10-2009
Posts 3

Re: Is it possible to have 2 background images stack on top of each other?????

Reply Quote

Hi Adam, yes two background images on the same page. Here is my code:

html {background:url(PhotoshopTutorials/BODYHEADER.gif) repeat-y center top;

/* background: url(PhotoshopTutorials/BODYBg.gif) repeat-y center 360px;*/

width: 1000px;

margin:0 auto;

padding:0;}

body{color: #000;

font: normal 16px Times New Roman, Times, serif;

margin: 0 auto;

padding:0;

width: 800px;}

#wrapper {margin:160px 0 0 0;

padding:0;

background-color:#e7e7e7;

overflow:auto;}

#Header {width: 800px;

height:200px;

/*margin-bottom:3px;*/

padding:0;

border-bottom: 3px solid #333;}

The effect I am trying to achieve is to have the body header image on top and the bodybg image appear directly underneath it.

The top image has a opaque design in it and is split into 2 colours one color on the left and one color on the right. The second image is one solid color on the left and a different solid color on the right to match the top image. And I would like to stack them on top of each other in the html tag.

I have tried making another div in between the html and body tag called "Background" and putting the other background image in there but it didnt work. Thanks for any input you can share!