JIYIK CN >

This article will teach you how to scale and stretch background images using CSS. Sometimes, we need to scale a background image based on the viewport or window size of the screen, and that’s what we’ll do in this article.

Use the CSS background-size property to scale the background image to fit the window

Programmers can use the background-size CSS property to manage the size of the background image. If we use cover as the value of the CSS background-size property, we can stretch the background image according to the user's window size.

For example, we created <h1>the element and added some text to be displayed. Additionally, we used the CSS background property to set a background image to the entire body.

We have passed 4 different values ​​to the background property. The first value represents the URL of the background image.

no-repeat means that the background image should not be repeated and should only be displayed once on the screen. The center value means that the background image should be in the center of the screen, and fixed means that the background image is fixed in size and does not allow scrolling.

Additionally, we used background-size: coverthe property in CSS, which allows us to scale the image based on the size of the body element.

HTML code:

<h1 class="text">This is the demo text.</h1>

CSS code:

body {
  background: url(https://pbs.twimg.com/profile_images/959568688654553089/PuZWi9tj_400x400.jpg) no-repeat center fixed;
  background-size: cover;
}

Output:

In the above output image, user can see that the image is stretched and a single image serves as the background of the web page.

We can also use 100% as the value of the CSS background-size property to fit the background image according to the viewport of the user's screen, as shown in the following example.

CSS code:

body {
  background: url(https://img.test.com/profile_images/959568688654553089/PuZWi9tj_400x400.jpg) no-repeat center fixed;
  background-size: 100%;
}
<h1 class="text">This is the demo text.</h1>

Output:

We have learned only two different ways to scale background images using CSS in this article. Users can choose any of the ways based on their comfort.