How to Stretch Background Image in CSS

21 July 2013

CSS Tricks, WebMasters

Sometimes, we set the background image but the background image doesn’t fit in the box. We need to stretch the background image. In CSS, the size of the background image is controlled by property “background-size”.

To stretch a background image in CSS, add the following code in the style of the box or body:

background-size: cover;

I hope this will work for you.

If It Doesn’t Work:

If there is no any change by adding this code, try using below code instead of above:

background-size: cover !important;

If It Doesn’t Look Better:

If the above codes make a background image ugly, try using one of the following codes:

background-size: 100%;
background-size: contain;

(You can add “!important” property if needed).

, , , ,

No comments yet.

Leave a Reply