CSS Properties: How to specify the size of a background image?

Last update on February 16 2024 13:17:51 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Declaration of HTML5 document type -->
<html>
<head>
<title>How to specify the size of a background image</title><!-- Title of the HTML document -->
<style>/* CSS style start*/
body {
background: url("https://www.w3resource.com/images/w3resource-logo.png"); /* Setting background image for the body */
background-size: 60px 40px; /* Setting the size of the background image to 60 pixels in width and 40 pixels in height */
background-repeat: no-repeat; /* Preventing the background image from repeating */
padding-top: 30px; /* Setting top padding for the body */
}
</style>
</head>
<body>
<p>The background-size CSS property specify the size of the background images.</p><!-- Paragraph content -->
<p>Original image: <img src="https://www.w3resource.com/w3r_images/html-css-exercise_logo.png" alt="HTML exercises" class="h1_img" width="150" height="150" /></p><!-- Paragraph content with an image -->
</body>
</html>

Explanation:

This HTML document demonstrates how to specify the size of a background image using CSS.
The CSS style block defines styling for the body element.
The background image used in this example is the w3resource logo.
background-size: 60px 40px; is used to specify the size of the background image to be 60 pixels in width and 40 pixels in height.
This property ensures that the background image is displayed at a specific size.
background-repeat: no-repeat; is used to prevent the background image from repeating.
padding-top: 30px; is used to add padding to the top of the body element.
The HTML content consists of two paragraphs: one explaining the background-size CSS property and another displaying an original image for comparison.

Live Demo:

See the Pen background-size-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page