Have Geek Brain

How can I use two background images on one page

I have one problem,

I have one background image with 1000px height. which i used in css body with fixed height but on some pages my content height is bigger than background image doesn't look good so i searched on google and i have a way to solve this and then i used height in body tag ,

<body style="height:830px">

and then i used slice bg-below 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 browsers except internet browser, tell me what to do, how can I solve this problem.

Thanks Mayur

+2
html css internet-explorer


a source to share


2 answers


For the first item in, <BODY>

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

The div background will be overlaid on top of the default background.



Note. IE6 requires a dedicated workaround as it does not support fixed positioning.

+1


a source to share


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

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

enter image description here



  1. In my html, I am adding a new div inside an existing div (which has two backgrounds).

  2. In my IE stylesheet, I rewrite the CSS for the original div to only display one background, and I create a second div to display the second background. I style them in such a way that the site looks the same when viewed in IE as it does in other browsers, although it will use two divs in IE.

This way, if the website is viewed in IE, one background is displayed in the original div, and one background is displayed in the new div. If the site is viewed in Mozilla or Chrome, etc., then the original div is just styled in the original stylesheet, which is set to display two background images, and essentially ignores the second div as there are no styles for it in the regular stylesheet ...

Anyway, you can see the complete code entry on one of my blog posts if you'd like more information - http://blog.thelibzter.com/using-two-background-images-for-one-div-in- ie

0


a source to share






More articles:


All Articles