CODEWITHSUNDEEP
htmlcssimage
user3380148
user3380148

Reputation: 439

Match height with 100% width

I am adding a few images to a portfolio website but want to use background-image in oppose to the img property. The website is very responsive and uses percents for it's basic structure. I am using the background-img property and setting the width of the container to 100% of its parent. Adding a set height makes the image visible however adding height:100% or height:auto makes the image disappear, I'm sure this is probably a pretty simple piece of code to figure out but I can't seem to find a solution. Below is the code I am using to implement the image

.image-left {
    float:left;
    width:100%; height:100%;
    background-image:url(/img/image.jpg);
    background-position: center top;
    background-size: 100% 100%;
}

And here is a http://jsfiddle.net/WD4HM/3/ to better explain my problem.

Any help would be appreciated, thanks guys.

Upvotes: 0

Views: 531

Answers (2)

Don Kelley
Don Kelley

Reputation: 170

new answer:

#wrap {
 width:50%; 
 margin:0 auto; 
 overflow:hidden; 
 background:blue;
}
.img-left {
 float:left;
 width:100%;
 height: 100%; 
 background-image:url(tiger.jpg);
 background-position: center top;
 background-size: 100% 100%; 
 margin-bottom:45px;
}

Upvotes: 0

JakeParis
JakeParis

Reputation: 11210

height: 100% does not work unless the parent element has an explicit height. The reason the image is disappearing when you use this rule is because the element actually has no height.

However, you can use javascript to capture the window height, and then match the element you want to be 100% of the window height.

Upvotes: 2

Related Questions