How to Stretch Background Image in CSS

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).

4 thoughts on “How to Stretch Background Image in CSS

  • 16 October 2018 at 16:48
    Permalink

    Dream Skin 【皇牌蝸牛精華原液系列*】Element 100蝸牛活膚精華原液 Snail ACTIVATE Bio-Peptide Serum的商品介紹 Dream Skin,皇牌蝸牛精華原液系列*,Element 100蝸牛活膚精華原液 Snail ACTIVATE Bio-Peptide Serum

    Reply
  • 12 October 2018 at 03:47
    Permalink

    最快速的日間上妝步驟。省下三倍的時間: 色彩校正、保濕與防曬一次完成。

    Reply
  • 5 October 2018 at 21:58
    Permalink

    magnificent issues altogether, you just gained a new reader.
    What could you suggest about your put up that you just made
    some days in the past? Any certain?

    Reply

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.