CODEWITHSUNDEEP
htmlcssbackgroundpositionbackground-image
sticksu
sticksu

Reputation: 3738

Bring background-image to frontground. Possible or not?

I really need to get the background picture in front of another picture and I can't find a way to do it without using absolute positioning.

<div><?php get_avatar($x, 56); ?></div>

get_avatar displays an image. So the HTML looks like:

<div><img src="whatever"></div>

A little help anyone?

Upvotes: 3

Views: 28251

Answers (3)

Spudley
Spudley

Reputation: 168803

Your code (with a background image style added for clarity):

<div style='background-image:url(something.jpg);'><img src="whatever.jpg"></div>

In order to make the background image show instead of the foreground image, the easiest solution is simply to make the <img> invisible.

Two ways to do this using CSS:

  1. Set it to visibility:hidden;

  2. Set it to opacity:1;

The first solution is the best, as it will work in all browsers.

Changing the opacity via Javascript would have the benefit of allowing you to do a fade effect, but expect problems with IE if you do that.

Hope that helps.

Upvotes: 0

sandeep
sandeep

Reputation: 92823

you can use css multiple background property

check this http://www.css3.info/preview/multiple-backgrounds/

or

Edit:

you can give your another pic z-index in minus like this:

    div{
    background:yellow;
    position:relative;
}
img{
    position:relative;
    z-index:-1
}

<div>
 <img alt="" src="http://dummyimage.com/200x200/000/45454&text=images">
</div>

check the example http://jsfiddle.net/sandeep/5vpG7/

Upvotes: 5

samir chauhan
samir chauhan

Reputation: 1543

You can use the css z-index property.

Set z-index:999;

Upvotes: 0

Related Questions