Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of how to solve the pit of the background picture setting in css, the content is detailed and easy to understand, the operation is simple and fast, and it has a certain reference value, I believe you will get something after reading this css background picture setting pit how to solve the article, let's take a look at it.

Background image settings for body

First: in this case, the background picture can be scaled but not proportionally scaled.

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

Background-position:center 0; the location origin of the background map, due to the uncertainty of body height

The background-attachment:fixed; background picture remains fixed and does not scroll with the page.

Second: in this case, the background image will be scaled proportionally, changing with the size of the window.

First set height:100% for html

Set up for body

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

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

By the same token

If the elements in body want to be 100% wide and high

The first way:

First set height:100%; for html and then set width:100%;height:100% for this element

The second way: when setting 100% for width/height, you should also set position:fixed

If you want to use input on the page, remove the default outline and border. If you use the default border, when you modify the js later, there will be a small pixel offset in the first interaction. It is recommended to reset it.

Put this sentence in, modify the small icon of the html web page title

Display text vertically in html

The setting of the width of the text object can only arrange the width distance of one text, so that there are no more than two words in a line of text, so that the text is automatically wrapped, thus forming the requirement of vertical typesetting.

At this point you need to add to the css

Word-wrap:break-word; word-break:normal; this two sentences can achieve punctuation line wrapping, while the overall vertical display

Writing-mode: sets the direction of object writing. 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

Running the code found that the IE display is normal, but Firefox and Google browser do not support it, so it is not recommended to use the writing-mode attribute.

This is the end of the article on "how to solve the pits in the setting of background pictures in css". Thank you for reading! I believe you all have a certain understanding of the knowledge of "how to solve the hole in the setting of background pictures in css". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.