How to Make a Background Image Fit Perfectly Inside a DIV?

Fit an Image Background to a DIV

You want a background image to fully display within a DIV, but a portion of the image is being cut off. To resolve this, consider using the background-size property, supported by most modern browsers.

For a background image that scales proportionally to fit within the DIV:

background-size: contain;

For a background image that stretches to fully cover the DIV, obscuring portions of the image if necessary:

background-size: cover;

Here's an example using background-size: contain:

<div>

And an example using background-size: cover:

<div>

Now, your background image will display fully within the DIV, regardless of its original size or aspect ratio.

The above is the detailed content of How to Make a Background Image Fit Perfectly Inside a DIV?. For more information, please follow other related articles on the PHP Chinese website!