CSS background

 CSS background properties background web design Xiangdangchongyao part, the foundation also presented the overall style of the page, in CSS background background design series, contains a number of important properties, for example, to design the page background color background-Color , display background images background -image , background-position for setting the background position, etc., are attributes commonly used by many designers. After familiarizing with these attributes, you can easily design a simple color web background style, or you can use it with a high-quality web background image. Presenting the overall web page visual effect, the following will briefly introduce several commonly used CSS background design attributes in sections.

CSS background-color background color example

<div style="background-color:#FFBB73">CSS background-color color code test</div>
<div style="background-color:pink">CSS background-color color English word test</div>
<div style="background-color:rgb(232,106,192)">CSS background-color RGB test</div>

The example presents the results as

CSS background-color color code test

CSS background-color color word test

CSS background-color RGB test

The background color can be said to be a very simple and effective technique to improve the quality of the picture when designing a web page. A simple background color can bring out the main features of the web page, and design a simple and high-quality web page. In fact, background-color can be used not only for the background color of the webpage, but also for designing the background color of other webpage elements, such as tables , DIV blocks , spans , etc., and such techniques can be applied to enrich the elements. Please use the color code table to select the color .

CSS background-image background image syntax

background-image:url('Background image URL');

background-image is used to insert background images for web pages. The placement of images is usually used with background-position . The advantage of using image backgrounds is that the page can be richer. Suitable background images can be used with the main body of the page to present a fairly high-end web design. This quality requires designers to work more attentively. The use of pictures as the background requires attention to display effects on various platforms, such as the difference in screen size, the browsing experience of mobile devices such as mobile phones or tablets, and whether the background picture can be correct with the main body of the page Matching is all the details that designers need to pay attention to. In addition, try not to highlight the background image to avoid making mistakes. For detailed usage, please refer to background-image .

CSS background-position background position

background-position: horizontal direction parameter or vertical direction parameter;

The main function of background-position is to set the position of the background image. The horizontal position or the vertical position can be set respectively. Usually, in order to fix the background image in one position, it will be designed with the background-attachment attribute. Detailed For syntax and examples, please refer to: background-position .

CSS background-attachment background image is fixed

background-attachment: attribute parameters

The function of background-attachment is to set whether the background image is fixed, that is, whether the background image needs to be moved when the mouse browses the web page up and down. This property has only two parameters, the default scroll and fixed, among which scroll It means that the background image will move with it, and fixed means that the background image will be fixed and will not change position as the web page is browsed. For detailed syntax and examples, please refer to: background-attachment .

The following commonly used attribute tables are all very basic background design functions of the CSS background series, which can be used alone or in a mix and match to change different background styles, especially if a picture is used as a background, then repeat, attachment, and position can be mixed and matched. The design is usually a relatively complete implementation plan.

Commonly used CSS background background property table

Attributes	Features
background-color	Set background color
background-image	Set background image
background-repeat	Set the repeated display and direction of the background image
background-attachment	Set the background image to be fixed or follow scrolling
background-position	Set background position