auto resize with css

Question

I have the following problem:

I have an image that goes through slides, I need that it is always resized to the size of the window and the monitor, I thought I'd use:

min-height: 100%; 
min-width: 1024px; 
width: 100%; 
height: auto;

But does not solve my problem in the above image shows my current problem, I have a header DIV and a FOOTER DIV which is superimposed the image and the image is getting underneath the two divs eating pieces of it, how do I fix this?

An image to demo:

try position:relative (or absolute) and setting z-index:1000 for example (in your css of course) — Nicolás Torres
– Nicolás Torres, Commented Jun 5, 2012 at 14:42

Nicolás Torres · Accepted Answer · 2012-06-05 15:03:27Z

1

img {
    min-height: 100%; 
    min-width: 1024px; 
    width: 100%; 
    height: auto; 

    position:relative;
    z-index:1000;
}

That will make sure the image appears above everything

EDIT:

<div id="header"></div>
<div id="image">
    <img src="image_path">
</div>
<div id="footer"></div>

If that is your source, your css should look like this.

#header,#footer{
height:150px; // You set the number
width:100%;
}

#image{ /* The code you were using */
     min-height: 100%; 
     min-width: 1024px; 
     width: 100%; 
     height: auto;
}

edited Jun 5, 2012 at 15:03

answered Jun 5, 2012 at 14:46

Nicolás Torres

1,3458 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Gustavo Porto Over a year ago

Thanks Nicolás! This code resolve 50% of my problem, now, the img is cuting only in the footer, an image to demo: i50.tinypic.com/2im0t8h.jpg

Nicolás Torres Over a year ago

You have to add the same rules to everything that should be above. z-index places things in different "levels" if one could say so. So if you want the footer and header to be above the image just give the image a smaller z-index than the header and footer.

Gustavo Porto Over a year ago

Actually, what I need is that the image is always set at the ends of the header and footer, regardless of the display or resolution, as it is a photo site ... the problem is not only the image of 'eat' a piece

Nicolás Torres Over a year ago

I understand now, I added a little example to see if it helps you

Gustavo Porto Over a year ago

Very thanks to help me! But is not work, the div image not resize according the footer, its my div footer: #footer-container {height:85px;display:block;background:#0a0a0a url(images/bg-footer.png) repeat-x left top;clear:both;position:fixed;bottom:0px;z-index:100;width:100%;} #footer {display:block;margin:0 auto;width:950px;overflow:hidden;}

|

Collectives™ on Stack Overflow

auto resize with css

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related