CODEWITHSUNDEEP
pngimagejpeg
Nikola Nastevski
Nikola Nastevski

Reputation: 937

Show one .png image over another .jpg image

I have the following code:

<img style="background: url(./image/data/logo.png) no-repeat top right" src="./image/data/picture.jpg" />

As it is now, it shows the logo.png under the picture.jpg image. How can I make it to be shown above the .jpg image?

Thanks.

Upvotes: 2

Views: 9152

Answers (2)

Ricardo Casta&#241;eda
Ricardo Casta&#241;eda

Reputation: 5812

According to your code I assume that you prefer to have a short html code. But it is impossible to have an image_tag with a background covering it. The cleanest way is to use jQuery:
This is the final code:
http://jsfiddle.net/QyMkh/

First put a div that will contain all your images. The div must have a class, the images don't require it necessarily.

<div class="image">
     <img  src="http://upload.wikimedia.org/wikipedia/commons/4/42/Papua_New_Guinea_map.png" />
     <img  src="http://upload.wikimedia.org/wikipedia/commons/4/42/Papua_New_Guinea_map.png" />
     <img  src="http://upload.wikimedia.org/wikipedia/commons/4/42/Papua_New_Guinea_map.png" /> 
</div>

Then add this jQuery block in the html before the closing </body>:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
    // store in a variable the url of the image that will be used as background
    var url = 'http://upload.wikimedia.org/wikipedia/commons/7/7a/Basketball.png';

    // select every image_tag that is children of the div with the class 'image'
    jQuery('.image img').each(function() { 
        // every child image will be wrapped inside generated divs with a class 'img-wrap'
        $(this).wrap('<div class="img-wrap"></div>'); 
    });

    // After the images are wrapped, insert the image tag that will work as background, note that instead of using the source I'm using the variable that stores it.
    $('<img src="' + url + '" class="logo" />').prependTo('.img-wrap');
</script>

Finally add those style declarations to get the desired effect.

<style type="text/css">
.img-wrap{position:relative}
.img-wrap img.logo{position:absolute; top:0; left:0}
</style>

This code will keep your html documents with no unnecesary markup when you try to edit next time. An advantage of using an image_tag as a background, is that with css you can resize its width and height. Try adding this new rule of stylesheet:

.img-wrap img.logo { height: 170px; left: 75px; position: absolute; top: 50px; width: 170px}

To end this, if you want more flexibility, for example you don't want the image_tags be container in a div, do this actions: replace this line of the jQuery block:

jQuery('.image img').each(function() {

with this

jQuery('.image').each(function() {

and add a class="image" to each 

<img class="image">

Upvotes: 0

Ricardo Casta&#241;eda
Ricardo Casta&#241;eda

Reputation: 5812

You must use 2 images to do that. The img must be with position absolute (The one that you want to be over the other).
Don't forget that the container must have position:relative in order to contain the absoluted png.
Here is the example:

http://jsfiddle.net/jNpaH/

The html tags:

<div class="image">
<img src="http://upload.wikimedia.org/wikipedia/commons/7/7a/Basketball.png" class="png-over" /> <img src="http://upload.wikimedia.org/wikipedia/commons/4/42/Papua_New_Guinea_map.png" /> </div>

The styles:

.image{position:relative}
.png-over{position:absolute; top:0; left:0}

The problem with that technique is that your code becomes spammed with the image tags.
One way of solving it with jQuery is to find each div container with the class 'images' and prepend to each one the image tag.
Here is the example:
http://jsfiddle.net/jNpaH/2/

Upvotes: 3

Related Questions