How to Make a Background Image Fully Visible Within a Div?

Fitting a Background Image to a Div

If a background image is partially obscured within a div, there are several methods to ensure it is fully displayed. Utilizing the background-size property offers two options:

Scaling the Background Image

To ensure the background image is scaled to fit within the div, use:

background-size: contain;

Covering the Entire Div with the Background Image

Alternatively, to scale the background image to cover the entire div, use:

background-size: cover;

Example:

#imagecontainer {
  background: url("http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg") no-repeat;
  width: 100px;
  height: 200px;
  border: 1px solid;
  background-size: contain;
}

<div><p>This technique ensures that the background image is displayed properly within the specified div.</p></div>

The above is the detailed content of How to Make a Background Image Fully Visible Within a Div?. For more information, please follow other related articles on the PHP Chinese website!