Detailed explanation of examples of background images in css

Body’s background image settings

First type: In this case, the background image can be scaled but cannot be completely proportional

background: url(imgs/1.jpg)no-repeat;

background-position:center 0; The positioning origin of the background image is uncertain due to the height of the body

##background-attachment:fixed; The background image remains fixed and will not scroll as the page scrolls

Second: In this case, the background image will be completely scaled proportionally, as the window size changes

First set the html height:100%;

Set for body

##background: url(imgs/1.jpg) no-repeat;

background-size: 100% 100%; If the background-size value is cover, this In this case, as long as one side touches the edge of the window, it will stop. In this case, the background image will not be scaled proportionally

Same reason,

If you want the width and height of the elements in the body to be 100%,

The first way:

First set the height:100%; to the html, and then set the width:100%;height:100%;

Second way: When setting width/height to 100%, you must also set position:fixed;

#If the page uses input, its default outline and border must be removed. If the default border is used, When js is modified later, there will be a slight pixel offset during the first interaction. It is recommended to reset

##link

rel="shortcut icon " href="imgs/favicon.ico"/> Place this sentence in and modify the small and medium icons in the title of the html page#Display text vertically in html

Setting the width of the text object can only arrange the width of the next text distance, so that the text cannot line up with two words in one line, so that the text automatically wraps, forming a vertical typesetting requirement

At this time, you need to add

# to the css

##word-wrap:break-word; word-break:normal;These two sentences can realize punctuation and line wrapping, and at the same time the overall vertical display

writing-mode: Set the writing direction of the object, there are two values,

1.lr-tb: from left to right, from top to bottom,

2. tb-rl: from top to bottom, from right to left

Run the code and find that IE displays normally, Firefox, and Google Chrome It is not supported, so it is not recommended to use the writing-mode attribute

The above is the detailed content of Detailed explanation of examples of background images in css. For more information, please follow other related articles on the PHP Chinese website!