Stretchable background images using CSS

Current Location：Home > Learning > WEB FRONT-END > CSS >

Vue React JavaScript Angular CSS HTML

Stretchable background images using CSS

Author：JIYIK Last Updated：2025/04/19 Views：

This short article is about styling HTML pages using CSS, focusing on styling background images of any HTML element.

CSS styles on the web page

There are a number of ways to use CSS on your web pages:

Inline CSS: Inline CSS means that you use the style attribute with any HTML element and apply any style properties specifically to that element.
Internal CSS: Internal CSS is used if you want to apply the style to a single page of your website. So, <style>write the style attributes on the page wrapped in a <style> element.
External CSS: External CSS is the type of CSS used to apply styles to all the website pages. So, you create a style sheet that contains different types of selectors and style attributes and include that style sheet on all the web pages of your website.

There are several CSS properties that can apply different types of styles. For this article, we will focus on the property background-size which is used to set the size of the background image of any element.

CSS background-size property

This CSS property is used when we apply any background such as an image and you need to set the size or position of that background image in that element. There are four ways to set the size of background.

The size is set using keywords. The keywords are auto, cover, and contain.
Using the single-value syntax, you specify only the width, and the height is set to auto.
Use the two-value syntax where you can give both width and height values.
Use multiple values for background size.

Syntax of the background-size property.

background-size: auto|contain|cover|initial|inherit|percentage|length

Keywords	definition
auto	This is the default value where the background image is displayed at its original size.
contain	In this value, the background-image is resized to be fully visible within the element.
cover	In this value, the background image is resized to fill the element container by stretching or cutting its edges.
initial	Set the default value.
inherit	It inherits the size of its parent element in the DOM.
percentage	You specify the size using a percentage value.
length	This is the unit the value is set to, e.g. px. If one is specified, the others are set to automatic.

We will use some of the values discussed above in the following examples.

In the following example, we create a div element that contains a paragraph. We apply a background image to the div element and then set its different sizes to get a demonstration of all the values.

代码 - HTML:

<body>
    <h2>background-size: 72% 52%:</h2>
    <div id="container1">
        <p>This div has a background-size of 72% and 52%.</p>
        <br/><br/>
    </div>
    <h2>background-size: 100% 100%:</h2>
    <div id="container2">
        <p>This div has a background-size of 100% and 100%.</p>
        <br/><br/>
    </div>
</body>

代码 - CSS:

#container1 {
    background: url(/img/DelftStack/logo.png);
    background-size: 72% 52%;
    background-repeat: no-repeat;
}
#container2 {
    background: url(/img/DelftStack/logo.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

In this CSS, we have created two different id-selectors and applied different properties to them. In container1, we set the background image to cover 72% of the width and 52% of the height.

And in container2, we set the background image to 100% width and 100% height.

In the next example, we will use the override value of background-size. Just one div container on the HTML page is enough.

代码 - CSS:

#container1 {
    background: url(/img/DelftStack/logo.png);
    background-size: cover;
    background-repeat: no-repeat;
}

代码 - HTML:

<body>
    <h2>background-size: 72% 52%:</h2>
    <div id="container1">
        <p>This div has a background-size of 72% and 52%.</p><br/><br/>
    </div>
</body>

We can see that the background image is overlaid to fill the entire div element.

We will use the property value as contain in the next example to see its results.

代码 - CSS:

#container1 {
    background: url(/img/DelftStack/logo.png);
    background-size: contain;
    background-repeat: no-repeat;
}

请注意, the background-image is fully visible within the div element and is not stretched to cover the entire element.

So, we can see how we can set the background-size property and make the image stretchable or visible depending on our needs and requirements. Remember, these properties can be applied to any HTML element, just like the div element.

Previous：Rotating text using CSS

Next：Creating background image gradients using CSS

For reprinting, please send an email to 1244347461@qq.com for approval. After obtaining the author's consent, kindly include the source as a link.

Article URL：

JIYIK CN >