What to do if css background exceeds width

The css background exceeds the width because the background image is too large. The solution: first open the corresponding css file; then add the "background-size:100% 100%" or "background-size:contain" style. Just make the width and height of the background image completely fit into the content area.

The operating environment of this tutorial: Windows 7 system, HTML5&&CSS3 version, DELL G3 computer.

Recommended: css video tutorial

The css background image exceeds the width of the set container because the background image is too large.

The background of an element is the total size of the element, including padding and borders (but not margins). By default, the background image is placed in the upper left corner of the element.

Solution:

Add background-size: 100% 100%; or background-size:contain; style so that the width and height of the background image fully adapt to the content area.

div{
        background-image: url(images/1.jpg);
       background-size: 100% 100%;
       
}

The above is the detailed content of What to do if css background exceeds width. For more information, please follow other related articles on the PHP Chinese website!