search

Home  >  Article  >  Web Front-end  >  Set background image size using CSS?

Set background image size using CSS?

WBOY
WBOYforward
2023-09-08 09:05:021538browse

Set background image size using CSS?

Using CSS, we can set a background image for an HTML element using the ‘background-image’ property. Also, after adding the background image, you need to set its dimensions.

We can use the CSS "background-size" property to set the size of the background image.

grammar

Users can use CSS to set the size of the background image according to the following syntax. 

background-size: width length | width | contain | inherit | cover | initial

We can use the above values ​​to set the size of the background image. Here we have explained all the values.

  • Width Length - Set the width and height of the background image. Users can use pixels, percentages, or rem for width and length values.

  • Width - It only sets the width of the image and sets the "auto" height.

  • Contain − Used to set the background image of an HTML element without reducing the size of the background image.

  • Inheritance − It inherits the background image size from the background image of the parent element.

  • Cover − It sets the dimensions of the background image in a way so that it can fit into the HTML element.

Example 1

In the example below, we set a background image for an HTML div element. The dimensions of the div element are 500 X 300. Using the background-size property, we set the background image to have dimensions of 200 X 200.

In the output, the user can observe that the size of the background image is smaller than the div element. Additionally, we used the “background-repeat: no-repeat” CSS property to avoid repetition. 

<html>
<head>
   <style>
      .div {
         background-image: url("https://www.tutorialspoint.com/css/images/css-mini-logo.jpg");
         background-size: 200px 200px;
         width: 500px;
         height: 300px;
         border: 1px solid blue;
         background-repeat: no-repeat;
      }
   </style>
</head>
<body>
   <h3>Using the background-size CSS property to set the size of the background image</h3>
   <div class = "div">
      This is a content of the div.
   </div>
</body>
</html>

Example 2

is translated as:

Example 2

In the example below, we use the "background-size: cover" CSS property to set the size of the background image.

In the output, we can observe that the background image fits the div element. However, when we set background-size to cover, some image edges are cut off. 

<html>
<head>
   <style>
      .div {
         background-image: url("https://i.pinimg.com/736x/91/aa/88/91aa882cdcb4632063535e86c829d3ba.jpg");
         background-size: cover;
         width: 500px;
         height: 500px;
         border: 2px solid green;
      }
   </style>
</head>
<body>
   <h3>Using the <i> background-size </i> CSS property to set the size of the background image</h3>
   <div class = "div">
      This is a content of the div.
   </div>
</body>
</html>
The Chinese translation of

Example 3

is:

Example 3

In the example below, we use the "background-size: contian" CSS property to set the background image size.

In the output, we can see that it sets the background image without suppressing the image's dimensions. 

<html>
<head>
   <style>
      .div {
         background-image: url("https://cdn.pixabay.com/photo/2016/06/02/02/33/triangles-1430105__480.png");
         background-size: contain;
         width: 500px;
         height: 500px;
         border: 2px solid green;
         font-size: 3rem;
      }
   </style>
</head>
<body>
   <h3>Using the <i> background-size: contain </i> CSS property to set the size of the background image</h3>
   <div class = "div">
      Hello! How are you?
   </div>
</body>
</html>

Example 4

is translated as:

Example 4

In the example below, we only give the width value of the 'background-size' attribute. Whenever we use only a value as 'background-size' property, it sets the height to automatic and the user can see this in the output. 

<html>
<head>
   <style>
      .div {
         background-image: url("https://images.pexels.com/photos/235985/pexels-photo-235985.jpeg?cs=srgb&dl=pexels-pixabay-235985.jpg&fm=jpg");
         background-size: 20rem;
         width: 500px;
         height: 500px;
         border: 2px solid green;
         font-size: 3rem;
      }
   </style>
</head>
<body>
   <h3>Using the <i> background-size: length auto </i> CSS property to set the size of the background image</h3>
   <div class = "div">
      Hello! How are you?
   </div>
</body>
</html>

Users learned to use CSS to set the size of background images. We can set custom dimensions to set the background image. Additionally, we can set the width and height of the background dimensions to "auto" values. If the user wishes to cover the entire HTML element with the background, then "cover" should be used as the value of the background-size attribute.

The above is the detailed content of Set background image size using CSS?. For more information, please follow other related articles on the PHP Chinese website!

css html auto 继承 background
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：Create a border animation using CSSNext article：Create a border animation using CSS

Related articles

See more