Set background image size using CSS?-CSS Tutorial-php.cn

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

Copy after login

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.

   
  Using the background-size CSS property to set the size of the background image
  This is a content of the div.

Copy after login

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.

   
  Using the  background-size  CSS property to set the size of the background image
  This is a content of the div.

Copy after login

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.

   
  Using the  background-size: contain  CSS property to set the size of the background image
  Hello! How are you?

Copy after login

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.

   
  Using the  background-size: length auto  CSS property to set the size of the background image
  Hello! How are you?

Copy after login

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!