How could i use two background images in one page_问答_开发者

How could i use two background images in one page

开发者 https://www.devze.com 2022-12-29 03:56 出处：网络

I have a one problem, I have one background image having 100开发者_如何学运维0px height. which i used in body of css having fixed height but on some pages my content height goes incresed more than ba

I have a one problem,

I have one background image having 100开发者_如何学运维0px height. which i used in body of css having fixed height but on some pages my content height goes incresed more than background image its not look good, so i searched on google and i got a way to solve this issue, then iused a height in body tag,

<body style="height:830px">

and then i used a slice of bg-below of width="960px" which i used in html tag

<html style="background:url(/images/bg-below.png) top center repeat-y #4290B7;">

it works fine in all browser except Internet explorer plese tell me what to do how can i resolve this problem.

Thanks Mayur

As the first element in <BODY> put: <div style="background-image:url('yourimage.jpg');position:fixed;z-index:-1;width:100%;height:100%;margin:0"></div>

The div's background will be overlaid on top of the standard background.

Note: IE6 requires a special workaround, since it doesn't support fixed positioning.

I have found a way to display two background images for one div in IE by:

Creating a conditional stylesheet for IE and in that stylesheet, adding the CSS for a new div. To create a conditional stylesheet, simply create a new stylesheet named iestyle.css or whatever you want it to be called, upload it to your server, and then reference it in the head of your web page with this line of code:

How could i use two background images in one page

In my html, I add the new div inside the existing div (that has two backgrounds).
In my IE stylesheet, I rewrite the CSS for the original div so that it will only display one background and I style the second div to display the second background. I style them in such a way that the website will look the same when viewed in IE as it does in other browsers, even though in IE it will be using two divs.

This way, if the website is being viewed in IE, one background displays in the original div and one background displays in the new div. If the site is being viewed in Mozilla, or Chrome, etc., then the original div simply uses the styles in the original stylesheet - which is set up to display two background images - and it essentially ignores the second div since there are no styles for it in the regular stylesheet.

Anyways, you can see a full write-up of the codes on one of my blog posts if you want more information - http://blog.thelibzter.com/using-two-background-images-for-one-div-in-ie