Reputation: 224
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:
Upvotes: 0
Views: 6653
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