CSS Properties: How to sets the width and height of the background image in percent of the parent element?

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

Solution:

HTML Code:

<!DOCTYPE html><!-- Declaration of HTML5 document type -->
<html>
<head>
<title>How to sets the width and height of the background image in percent of the parent element</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-repeat:no-repeat; /* Setting background repeat property to "no-repeat" */
background-size:50%; /* Setting background size property to 50% of the parent element's width, height will be auto */
}
</style>
</head>
<body>
<p>The background-size CSS property set the width and height of the background image in percent of the parent element.</p><!-- Paragraph content -->
</body>
</html>

Explanation:

This HTML document demonstrates how to set the width and height of the background image as a percentage of the parent element.
The CSS style block defines styling for the body element.
The background image used in this example is the w3resource logo.
background-repeat:no-repeat; is used to set the background repeat property to "no-repeat", which means the background image will not be repeated.
background-size:50%; is used to set the width of the background image to 50% of the parent element's width. The height will be automatically adjusted to maintain the aspect ratio of the background image.
The HTML content consists of a paragraph explaining the background-size CSS property.

Live Demo:

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

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page