Jump to content

css z-index background image


Recommended Posts

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 post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...