Css background image tips and pitfalls, css background image tips

Css background image tips and pitfalls, css background image tips

Background Image settings of the body

First: In this case, the background image can be scaled but not completely proportional.

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

Background-position: center 0; Positioning origin of the background image, due to the high body uncertainty

Background-attachment: fixed; the background image remains fixed and does not scroll along with the page

Second: In this case, the background image scales proportionally, and the size of the window changes.

First, set the html height: 100%;

Set body

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

Background-size: 100% 100%; if the value of background-size is cover, the background image is stopped as long as one side encounters the window side. In this case, the background image is not scaled proportionally.

Similarly,

If the element in the body is to be 100% in width,

Method 1:

Set height: 100% in html first, and Set width: 100% in html; height: 100% in html;

Method 2: Set position: fixed when setting 100% for width/height;

To use input on a page, remove the default outline and border. If the default border is used, a tiny pixel offset will appear during the first interaction of the subsequent js modifications. We recommend that you reset the value.

<Linkrel = "shortcut icon" href = "imgs/favicon. ico"/> in Vertical text display in html

Setting the width of a text object can only arrange the width and distance of the next text, so that no more than two lines of text can be arranged in the text line, thus forming the vertical layout requirement.

In this case, you need to add

Word-wrap: break-word; word-break: normal; the two sentences can be punctuated and displayed vertically.

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 down, from right to left

Run the code and find that IE is displayed normally, but Firefox and Google browsers do not support it. Therefore, the writing-mode attribute is not recommended.