In this lesson, we will learn how to work with background in HTML using different types of CSS background properties.
CSS background Property
The CSS background property is used to work with the background color and image. It consists of several sub-properties among which the most frequently used properties are:
background-color
background-image
background-repeat
background-position
background-position-x
background-position-y
background-attachment
background-size
Let's discuss each background property in detail with examples.
background-color
The background-color property is used to apply a background color to an HTML element. For example:
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>background-color Example</title>
<!-- Internal CSS -->
<style>
body {
background-color: yellow;
}
p {
background-color: #54BDFF;
}
</style>
</head>
<body>
<p>This is a paragraph of text.</p>
</body>
</html>
background-image
The background-image property is used to set a background image of an HTML element. You can also set multiple background images of an HTML element the background-image property. For example:
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>background-image Example</title>
<!-- Internal CSS -->
<style>
div {
height: 300px;
background-image: url("butterfly-small.png");
}
</style>
</head>
<body>
<div>
<p>This is an example of background image.</p>
</div>
</body>
</html>
Click here to download the above butterfly image file for practice purposes.
background-repeat
The background-repeat property is used to manage the repetition order of a background image of an HTML element. The values of background-repeat property are:
repeat: It will repeat the background image in both vertical and horizontal direction. The image is clipped if it does not fit. This is the default value of background-repeat property.
repeat-x: It will repeat the background image in horizontal direction.
repeat-y: It will repeat the background image in vertical direction.
no-repeat: It will not repeat the background image. The image is displayed only once.
space: It will repeat the background-image as many times as possible without getting clipped. The first and last images will be pinned to the respective sides of the element, and the whitespace will be evenly distributed between the images.
round: It will repeat the background-image without clipping to completely fill the available space. But to fill the space properly it may either squished or stretched the image.
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>background-repeat Example</title>
<!-- Internal CSS -->
<style>
div {
height: 300px;
background-image: url("butterfly-small.png");
background-repeat: repeat;
}
</style>
</head>
<body>
<div>
<p>This is a paragraph of text.</p>
</div>
</body>
</html>
background-position
By default, a background image will be positioned in the top left corner of the screen. The background-position property is used to change the default position of the background image anywhere you like on the screen.
The background-position property has two values. The first value represent the x coordinate and the second value represent the y coordinate.
Both x and y coordinates can be represented in pixel, percentage or word like left, right, top, bottom and center. For example:
background-position: 100px 200px: The background image will be positioned at 100 pixel from the left edge and 200 pixel from the top edge of its parent element.
background-position: 50% 50%;: The background image will be positioned at 50% from the left edge and 50% from the top edge of its parent element.
background-position: top left: The background image will be positioned in the top left corner of its parent element. You can also write left top.
background-position: top right: The background image will be positioned in the top right corner of its parent element. You can also write right top.
background-position: top center: The background image will be positioned horizontally center from the top edge of its parent element. You can also write center top.
background-position: bottom left: The background image will be positioned in the bottom left corner of its parent element. You can also write left bottom.
background-position: bottom right: The background image will be positioned in the bottom right corner of its parent element. You can also write right bottom.
background-position: bottom center: The background image will be positioned horizontally center from the bottom edge of its parent element. You can also write center bottom.
background-position: left center: The background image will be positioned vertically center from the left edge of its parent element. You can also write center left.
background-position: right center: The background image will be positioned vertically center from the right edge of its parent element. You can also write center right.
background-position: center center: The background image will be positioned horizontally and vertically center of its parent element. It means the image will be positioned in the middle of its parent element.
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>background-position Example</title>
<!-- Internal CSS -->
<style>
div {
height: 300px;
background-image: url("butterfly-small.png");
background-repeat: no-repeat;
background-position: 100px 200px;
}
</style>
</head>
<body>
<div>
<p>The image is positioned at 100px from left and 200px from top of the div.</p>
</div>
</body>
</html>
background-position-x
The background-position-x property is used to positioned a background image from the left edge of its parent element. For example:
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>background-position Example</title>
<!-- Internal CSS -->
<style>
div {
height: 300px;
background-image: url("butterfly-small.png");
background-repeat: no-repeat;
background-position-x: 250px;
}
</style>
</head>
<body>
<div>
<p>The image is positioned at 250px from left edge of the div.</p>
</div>
</body>
</html>
You can also use value in percentage to the move the background image from the left side.
background-position-y
The background-position-y property is used to positioned a background image from the top edge of its parent element. For example:
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>background-position Example</title>
<!-- Internal CSS -->
<style>
div {
height: 300px;
background-image: url("butterfly-small.png");
background-repeat: no-repeat;
background-position-y: 100px;
}
</style>
</head>
<body>
<div>
<p>The image is positioned at 100px from top edge of the div.</p>
</div>
</body>
</html>
background-attachment
The background-attachment property specifies whether a background picture is fixed or scrolls along with the containing element. The background-attachment property has two values and they are:
scroll: The default value of background-attachment is scroll. It means that the background image will scroll with the content when user scroll the content.
fixed: The fixed value will locked the background image and it will not scroll along with the content when user scroll the content.
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>background-attachment Example</title>
<!-- Internal CSS -->
<style>
div {
background-image: url("butterfly-small.png");
background-repeat: no-repeat;
background-attachment: scroll;
}
</style>
</head>
<body>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br>
<br>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br>
<br>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br>
<br>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
</html>
background-size
The background-size property is used to control the width and height of the background image. The values of the background-size property are as follows:
cover: The background image is scaled to cover the entire element's area while maintaining its aspect ratio. Some parts of the image might be cropped if necessary.
contain: The background image is scaled to fit within the element's area, ensuring that the entire image is visible. This might result in empty space within the element if the image's aspect ratio differs from the element's aspect ratio.
pixel: You can specify a length value in pixels for the width or height of the background image.
percent: You can specify a length value in percent for the width or height of the background image.
auto: The width and height of the background image is calculated automatically according to its aspect ratio.
Do you like cookies? 🍪 We use cookies to ensure you get the best experience on our website. Learn more
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>background-image Example</title>
<!-- Internal CSS -->
<style>
div {
height: 300px;
background-image: url("butterfly-small.png");
}
</style>
</head>
<body>
<div>
<p>This ia an example of background image.</p>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Multiple background-image Example</title>
<!-- Internal CSS -->
<style>
div {
height: 300px;
background-image: url("butterfly-small.png"), url("teddybear.png");
}
</style>
</head>
<body>
<div>
<p>This ia an example of multiple background images. Teddybear image is below the butterfly image.</p>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Multiple background-image Order Example</title>
<!-- Internal CSS -->
<style>
div {
height: 300px;
background-image: url("teddybear.png"), url("butterfly-small.png");
}
</style>
</head>
<body>
<div>
<p>This ia an example of multiple background images order. Butterfly image is below the teddybear image.</p>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>background-repeat Example</title>
<!-- Internal CSS -->
<style>
div {
height: 330px;
background-image: url("butterfly-small.png");
background-repeat: repeat;
}
</style>
</head>
<body>
<div>
<p>This is a paragraph of text.</p>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>background-repeat Example</title>
<!-- Internal CSS -->
<style>
div {
height: 330px;
background-image: url("butterfly-small.png");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<div>
<p>This is a paragraph of text.</p>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>background-repeat Example</title>
<!-- Internal CSS -->
<style>
div {
height: 330px;
background-image: url("butterfly-small.png");
background-repeat: repeat-y;
}
</style>
</head>
<body>
<div>
<p>This is a paragraph of text.</p>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>background-repeat Example</title>
<!-- Internal CSS -->
<style>
div {
height: 330px;
background-image: url("butterfly-small.png");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div>
<p>This is a paragraph of text.</p>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>background-repeat Example</title>
<!-- Internal CSS -->
<style>
div {
height: 330px;
background-image: url("butterfly-small.png");
background-repeat: space;
}
</style>
</head>
<body>
<div>
<p>This is a paragraph of text.</p>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>background-repeat Example</title>
<!-- Internal CSS -->
<style>
div {
height: 330px;
background-image: url("butterfly-small.png");
background-repeat: round;
}
</style>
</head>
<body>
<div>
<p>This is a paragraph of text.</p>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>background-repeat example on multiple background images</title>
<!-- Internal CSS -->
<style>
div {
height: 330px;
background-image: url("teddybear.png"), url("butterfly-small.png");
background-repeat: no-repeat, round;
}
</style>
</head>
<body>
<div>
<p>Teddybear image will repeat only once but butterfly image will repeat round.</p>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>background-position Example</title>
<!-- Internal CSS -->
<style>
div {
height: 300px;
background-image: url("butterfly-small.png");
background-repeat: no-repeat;
background-position: 100px 200px;
}
</style>
</head>
<body>
<div>
<p>The image is positioned at 100px from left and 200px from top of the div.</p>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>background-position Example</title>
<!-- Internal CSS -->
<style>
div {
height: 300px;
background-image: url("butterfly-small.png");
background-repeat: no-repeat;
background-position: 50% 50%;
}
</style>
</head>
<body>
<div>
<p>The image is positioned at 50% from left and 50% from top of the div.</p>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>background-position Example</title>
<!-- Internal CSS -->
<style>
div {
height: 300px;
background-image: url("butterfly-small.png");
background-repeat: no-repeat;
background-position: top left;
}
</style>
</head>
<body>
<div>
<p>The image is positioned in the top left corner of the div.</p>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>background-position Example</title>
<!-- Internal CSS -->
<style>
div {
height: 300px;
background-image: url("butterfly-small.png");
background-repeat: no-repeat;
background-position: top right;
}
</style>
</head>
<body>
<div>
<p>The image is positioned in the top right corner of the div.</p>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>background-position Example</title>
<!-- Internal CSS -->
<style>
div {
height: 300px;
background-image: url("butterfly-small.png");
background-repeat: no-repeat;
background-position: top center;
}
</style>
</head>
<body>
<div>
<p>The image is positioned in the top center of the div.</p>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>background-position Example</title>
<!-- Internal CSS -->
<style>
div {
height: 300px;
background-image: url("butterfly-small.png");
background-repeat: no-repeat;
background-position: bottom left;
}
</style>
</head>
<body>
<div>
<p>The image is positioned in the bottom left corner of the div.</p>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>background-position Example</title>
<!-- Internal CSS -->
<style>
div {
height: 300px;
background-image: url("butterfly-small.png");
background-repeat: no-repeat;
background-position: bottom right;
}
</style>
</head>
<body>
<div>
<p>The image is positioned in the bottom right corner of the div.</p>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>background-position Example</title>
<!-- Internal CSS -->
<style>
div {
height: 300px;
background-image: url("butterfly-small.png");
background-repeat: no-repeat;
background-position: bottom center;
}
</style>
</head>
<body>
<div>
<p>The image is positioned in the bottom center of the div.</p>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>background-position Example</title>
<!-- Internal CSS -->
<style>
div {
height: 300px;
background-image: url("butterfly-small.png");
background-repeat: no-repeat;
background-position: left center;
}
</style>
</head>
<body>
<div>
<p>The image is positioned in the left center of the div.</p>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>background-position Example</title>
<!-- Internal CSS -->
<style>
div {
height: 300px;
background-image: url("butterfly-small.png");
background-repeat: no-repeat;
background-position: right center;
}
</style>
</head>
<body>
<div>
<p>The image is positioned in the right center of the div.</p>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>background-position Example</title>
<!-- Internal CSS -->
<style>
div {
height: 300px;
background-image: url("butterfly-small.png");
background-repeat: no-repeat;
background-position: center center;
}
</style>
</head>
<body>
<div>
<p>The image is positioned in the middle of the div.</p>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>background-position Example</title>
<!-- Internal CSS -->
<style>
div {
height: 300px;
background-image: url(butterfly-small.png), url(teddybear.png);
background-repeat: no-repeat;
background-position: 195px 145px, 150px 50px;
}
</style>
</head>
<body>
<div>
<p>The butterfly is positioned 192px from left and 145px from top. The teddybear is positioned 150px from left and 50px from top.</p>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>background-attachment Example</title>
<!-- Internal CSS -->
<style>
div {
background-image: url("butterfly-small.png");
background-repeat: no-repeat;
background-attachment: scroll;
}
</style>
</head>
<body>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br>
<br>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br>
<br>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br>
<br>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>background-attachment Example</title>
<!-- Internal CSS -->
<style>
div {
background-image: url("butterfly-small.png");
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br>
<br>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br>
<br>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br>
<br>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>background-size Example</title>
<!-- Internal CSS -->
<style>
#demo1 {
width: 300px;
height: 250px;
background-image: url("butterfly-small.png");
background-repeat: no-repeat;
background-size: 100px 50px;
}
#demo2 {
width: 300px;
height: 250px;
background-image: url("butterfly-small.png");
background-repeat: no-repeat;
background-size: 100px;
}
</style>
</head>
<body>
<div id="demo1">
<p>background-size: 100px 50px. The first value is for width and second value is for height of the background image</p>
</div>
<div id="demo2">
<p>background-size: 100px. Only value for width is give but value for height is not given. In this case the height will be scaled automatically</p>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>background-size Example</title>
<!-- Internal CSS -->
<style>
#demo1 {
width: 300px;
height: 250px;
background-image: url("butterfly-small.png");
background-repeat: no-repeat;
background-size: 50% 40%;
}
#demo2 {
width: 300px;
height: 250px;
background-image: url("butterfly-small.png");
background-repeat: no-repeat;
background-size: 70%;
}
</style>
</head>
<body>
<div id="demo1">
<p>background-size: 50% 40%. The first value is for width and second value is for height of the background image in respect to the size of its parent element</p>
</div>
<div id="demo2">
<p>background-size: 70%. Only value for width is give but value for height is not given. In this case the height will be scaled automatically</p>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>background-size Example</title>
<!-- Internal CSS -->
<style>
div {
width: 300px;
height: 250px;
background-image: url("butterfly-small.png");
background-repeat: no-repeat;
background-size: auto 100px;
}
</style>
</head>
<body>
<div>
<p>background-size: auto 100px. The width of the background image will automatically adjust itself according to the given height of the background image according to aspect ratio</p>
</div>
</body>
</html>
