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 thestyle
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
, andcontain
. - 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.