How to tile css background-image?

When doing web page layout in the past, one div could only set one background image. If multiple backgrounds were set, multiple divs must be nested to achieve better compatibility. If your website requires compatibility with lower browser versions, it is recommended to use this method. The emergence of CSS3 solves the problem that a div can only set one background, allowing a div to set multiple background images. background-imageYou can also set linear gradients and other effects.

Regarding the background of css3, it is very powerful and has many attributes, such as background-size, etc. You can write a blog about these attributes. Regarding other properties of css3background, I will blog about them separately later!

CSS3/CSS1 background-image attribute

Syntax:

background-image：<bg-image> [ , <bg-image> ]
*<bg-image> = none | <url> | <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient>

Default value: none

Value:

none: none Background image.

< url >: Specify the background image using an absolute or relative address.

< linear-gradient>: Create a background image using a linear gradient. (CSS3)

: Create a background image using a radial (radial) gradient. (CSS3)

< repeating-linear-gradient>: Create a background image using a repeating linear gradient. (CSS3)

< repeating-radial-gradient>: Create a background image using a repeating radial (radial) gradient. (CSS3)

Description:

Set or retrieve the background image of the object .

If background-image is set, it is also recommended that the author sets background-color to maintain a certain contrast with the text when the background image is invisible.

The corresponding script feature is backgroundImage.

How to stretch the background image to cover the screen in CSS

The CSS code I wrote is

#bg
{
width: 100%;
height: 100%;
background:url(images/beijing.png);
}

In this way, it will repeat the image to cover the screen. I How should I write it if I want him to stretch the picture to fill the screen?

background:url(images/beijing.png) repeat;

Add an attribute

background-size:100%;background:url(images/beijing.png) no-repeat;

Add an attribute background-size:100%;background:url(images/beijing.png) no-repeat; The picture will be distorted oh!

Either the outer frame is limited, set it to 100%. I tested it here and it is full. You can see if there are any other attributes that affect it.

The above is the detailed content of How to tile css background-image?. For more information, please follow other related articles on the PHP Chinese website!