Css background image tips and pitfalls, css background image tips

Source: Internet
Author: User

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.