CODEWITHSUNDEEP
htmlcss
Banana
Banana

Reputation: 4228

Resizeable div with background image

I have a div with a background image:

<div id="myDiv">
   ...
</div>

#myDiv {
   background-image: url(...);
   width: 70%;
   max-width: 200px;
}

Now, I want my background image to be resized to fit the div. To do this, a added background-size: 100%. This solves the problem regarding width, but the height only accomodates the content of the, and since the content of this div is smaller, the image is cropped in the bottom. What should I set for the height attribute so that it follows the resizing of the width?

Upvotes: 0

Views: 76

Answers (1)

Firas
Firas

Reputation: 562

If I understand well, you want the background to be streched and fit exactely to the div. In that case, try to set both values of the background-size property in this way:

background-size: 100% 100%;

Upvotes: 2

Related Questions