Gustavo Porto
Gustavo Porto

Reputation: 224

auto resize with css

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:

http://i46.tinypic.com/prqdl.jpg

Upvotes: 0

Views: 6653

Answers (1)

Nicolás Torres
Nicolás Torres

Reputation: 1345

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;
}

Upvotes: 1

Related Questions