djp1988 Posted January 6, 2008 Share Posted January 6, 2008 Hi, is it possible to have 2 background images arranged by z-index? I want a bg image as a img which covers the whole background and a smaller image partly transparent for the top only, is it possible to have 2 bg images tat are arranged by z-index ?I tried and it didn't work but maybe i'm not doing it right... Link to comment Share on other sites More sharing options...
Ingolme Posted January 6, 2008 Share Posted January 6, 2008 In order to put two images you need two containers, for example:<div style="width: 500px; height: 200px; background-image: url(file.jpg)"> <div style="width: 500px; height: 200px; background-image: url(file2.jpg)"> </div></div> Link to comment Share on other sites More sharing options...
djp1988 Posted January 6, 2008 Author Share Posted January 6, 2008 I was wondering about the body having 2 background images Link to comment Share on other sites More sharing options...
jlhaslip Posted January 6, 2008 Share Posted January 6, 2008 nope, not possible Link to comment Share on other sites More sharing options...
skaterdav85 Posted January 9, 2008 Share Posted January 9, 2008 Is there a default z-index? if so wut is it? Link to comment Share on other sites More sharing options...
Ingolme Posted January 9, 2008 Share Posted January 9, 2008 The default Z-index is 0, but elements with the same Z-index will be displayed in the order they were loaded, the first ones behind and the last ones in front. Link to comment Share on other sites More sharing options...
packrat Posted January 14, 2008 Share Posted January 14, 2008 Its true that you cannot have multiple background images, but you can certainly achieve the same effect with some mildly clever markup. The example below illustrates one technique I employ when I want to want to have multiple backgrounds or have transparency on the background but not the underlying content. You can just as easily use image tags rather than divs with backgrounds, but the divs allow you to use the repeat and starting posiiton settings for background images. <div style="width:400px;height:300px;border:1px solid #CCC; background:top left no-repeat url(BG1.png); margin:auto; margin-top:22px; "> <div style="position:absolute;width:400px;height:300px;background:top left no-repeat url(BG2.png); filter:alpha(opacity=50);-moz-opacity:.50;opacity:.50"></div> <div style="position:absolute;width:400px;height:300px;background:top left no-repeat url(BG3.png); filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25"></div> <div style="position:absolute;width:400px;height:300px;"> {content} </div></div> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.