css
  1. css-background-size
PreviousNext

CSS Background Size

  • The background-size property in CSS is used to set the size of a background image.
  • It is a useful property that can help you control the layout and appearance of your web pages.

Syntax

background-size: auto|<width> <height>|cover|contain|initial|inherit;

Example

Here is an example of using the background-size property in CSS:

<!DOCTYPE html>
<html>
<head>
    <title>CSS Background Size Example</title>
    <style>
        body {
            background-image: url("https://static.additionalsheet.com/images//others/llogin.png");
            background-size: cover;
        }
    </style>
</head>
<body>
    <h1>CSS Background Size Example</h1>
    <p>This is an example of using the background-size property in CSS.</p>
</body>
</html>
Try Playground

In this example, we use the background-size property to set the size of a background image to cover the entire background of the webpage.

Explanation

The background-size property can be used to set the size of a background image in a variety of ways. The property values auto, <width> <height>, cover, contain, initial, and inherit can all be used to control the size of the image.

  • auto: The default value - the background image is displayed at its original size.
  • <width> <height>: The width and height of the background image are specified in pixels or percentages.
  • cover: The background image is sized to cover the entire background of the element, while maintaining aspect ratio. If the element has any extra space, it is cropped.
  • contain: The background image is sized to fit within the element, while maintaining aspect ratio. If the element has any extra space, it will be filled with a background color.
  • initial: This sets the property to its default value.
  • inherit: This specifies that the value should be inherited from the parent element.

Use

The background-size property is widely used in website design to control the size and appearance of background images. It can help you achieve a professional, polished look on your website with minimal effort.

Important Points

  • The background-size property can be used to set the size of a background image in a variety of ways, including auto, <width> <height>, cover, and contain.
  • By setting the background-size property for an element, you can control how the background image is displayed and sized, which can help improve the layout and design of your web pages.

Summary

The background-size property in CSS is a useful tool for controlling the appearance and layout of your web pages. Whether you're using a simple background image or a complex, multi-layered design, the background-size property can help you achieve the look and feel you want for your website.

Background RepeatBorder
Published on: