CSS background guide

Original link: Backgrounds In CSS: Everything You Need To Know
Translation link: CSS background guide

Please retain copyright and links when reprinting

Background is an important part of CSS and one of the basic knowledge of CSS that you need to know. This article will cover the basic usage of css background (background), including attributes such as background-attachment, etc., and also introduce some common techniques about background (background), as well as the background (background) in css3 (including 4 new the background property).

Background in css2

Overview

There are 5 main background properties in CSS2, they are:

• background-color: Specifies the color to fill the background.
• background-image: Reference image as background.
• background-position: Specifies the position of the element's background image.
• background-repeat: Determines whether to repeat the background image.
• background-attachment: Determines whether the background image scrolls with the page.

These properties can all be combined into one abbreviated property: background. One important point to note is that the background occupies all of the element's content area, including padding and border, but does not include the element's margin. It works fine in Firefox, Safari, Opera and IE8, but in IE6 and IE7, the background does not include the border.

Basic properties

background-color

The background-color property fills the background with a solid color. There are many ways to specify this color, and the following methods all give the same result.

background-color: blue;
background-color: rgb(0, 0, 255);
background-color: #0000ff;

The background-color can also be set to transparent, which makes elements underneath it visible.

background-image

The background-image attribute allows specifying an image to be displayed in the background. Can be used in conjunction with background-color, so if the image does not repeat, the areas not covered by the image will be filled with the background color. The code is very simple, just remember that the path is relative to the style sheet, so in the following code, the image and style sheet are in the same directory.

background-image: url(image.jpg);

But if the picture is in a subdirectory called images, it should be:

background-image: url(images/image.jpg);

Tangbantomatoes: Use ../ to indicate the upper-level directory, such as background-image: url(../images/image.jpg); indicating that the image is located in the images subdirectory in the upper-level directory of the style sheet. It’s a bit convoluted, but everyone should already know this, so I won’t elaborate on it. Front-end Observation All Rights Reserved, please keep the link when reprinting.