CODEWITHSUNDEEP
cssimagecenter
Damian
Damian

Reputation: 1720

How to center one image over another

I have 2 images - one is the main image and the other is like a picture frame that I'd like to position over the top of the main image. The picture frame image is a png with a transparent center so the main image shows through.

The dimensions of the images are important - the inner main image has to be smaller than the frame so it is only visible through the center:

main.jpg = 367 x 550

frame.png = 405 x 597

I thought I had it with the following code...

<div style="background-image:url('/main.jpg') no-repeat scroll center center transparent;">
<img style="width:100%; max-width:100%;" src="/frame.png">
</div>

...which works great until you see the screen on a mobile phone; the frame.png stretches because I've given the width as 100% but the background main.jpg doesn't stretch along with it.

I need the design to be fluid, so I need the images to stretch.

Is there a way to make sure the background stretches the same as the main image?

I've tried all kinds of different methods to get this working, absolutely positioning the frame in a div floating over the main image, etc but I couldn't get the main image to appear centered horizontally and vertically when I did that.

Is there any way to achieve what I want without resorting to javascript?

The reason I'm using 2 images by the way is because of file size. I need the main image to be jpg so I can keep it small, but I also need the transparency on the frame so that has to be png :(

Upvotes: 13

Views: 35489

Answers (4)

Wouter Raateland
Wouter Raateland

Reputation: 1047

I usually use this:

HTML:

<div id="frame">
    <img id="myImg" src="main.jpg">
</div>

CSS:

#frame {
    position: relative;

    width: 597px;
    height: 405px;

    background-image: url(frame.png);
    background-position: center;
    background-size: cover; }

#myImg {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

    display: block;
    margin: auto; }

This works for all images and other elements with fixed dimensions, or a set max-width and max-height.

I hope this works for you :)

Upvotes: 25

avrahamcool
avrahamcool

Reputation: 14094

I've created a fiddle for you.

http://jsfiddle.net/avrahamcool/4VQzP/

in my fiddle, the frame is just a black background, and the img is just a red background. as you can see, no need for transparent frame (because the img is above it)

instead of centering the frame above the img, I'm centering the img above the frame. (if I understood correctly, this also serves your purpose)

HTML:

<div id="Frame">
    <span class="Centerer"></span><img src="http://i.imgur.com/CbcmRLC.jpg"/>
</div>

CSS:

#Frame
{
    width: 405px;
    height: 597px;
    background: url('http://i.imgur.com/uRvKrNR.jpg') no-repeat;
    text-align: center;
}
.Centerer
{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
#Frame > img
{
    vertical-align: middle;
}

Upvotes: 3

Dennis Carney
Dennis Carney

Reputation: 58

If you set the image as absolute; it is going to lift out of it's container.

Floating may do the same.

What about z-index:1; and x-index:2; with margin:auto; ?

Upvotes: 0

Can Gokdere
Can Gokdere

Reputation: 286

I generally use another image absolute positioned as background. like:

<div>
<img class="background-img" width="100%" height="100%" style="position:absolute; top:0; left:0">
<img class="second-img" width="100%" height="100%" /> 
<!-- Then do the positioning with classes -->
</div>

Give it a shot, hope it works as you want

Upvotes: 3

Related Questions