Stretchable Background Image Using CSS

  2. HowTo
  3. CSS Howtos
  4. Stretchable Background Image Using CSS
Naila Saad Siddiqui Feb 20, 2023
CSS CSS Background
  1. CSS Styling on a Webpage
  2. CSS background-size Property
Stretchable Background Image Using CSS

This brief article is about using CSS to style your HTML page, focusing on styling a background image of any HTML element.

CSS Styling on a Webpage

There are multiple ways to use CSS on your webpage:

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

There are multiple CSS properties to apply different types of styles. For this article, we’ll focus on the property background-size used to set the size of the background image of any element.

CSS background-size Property

This CSS property is used when we have applied any background (image, for example), and you need to set the size or position of that background image within that element. There are four ways to set the background-size.

  • Use the keyword to set the size. The keywords are auto, cover, and contain.
  • Use one-value syntax, where you specify the width only, and height is set to auto.
  • Use two-value syntax, in which you give width and height values.
  • Use multiple values for background size.

The syntax of background-size property.

background-size: auto|contain|cover|initial|inherit|percentage|length
Keyword Definition
auto This is the default value in which the background image gets displayed in its original size.
contain In this value, the background image is resized to be completely visible in the element.
cover In this value, the background image is resized to fill the element container either by stretching it or cutting its edges.
initial Sets the default value.
inherit It inherits the size of its parent element in the DOM.
percentage You specify the size using some percentage value.
length This is to set the value in a unit like px. If one is specified other is set to auto.

We will use some of the values discussed above in the example below.

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

Code - 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>

Code - 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 have set the background image to cover 72% of the width and 52% of the height.

Whereas, in container2, we have set the background image’s 100% width and 100% height.

In the next example, we’ll use the cover value of the background-size. Only one div container will be enough on the HTML page.

Code - CSS:

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

Code - 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 covered to fill the whole div element.

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

Code - CSS:

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

Note that the background image is completely visible in the div element and is not stretched to cover the whole element.

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

Related Article - CSS Background