"CSS Learning notes" background image

Source: Internet
Author: User

Look directly at the code:

Background:blue;

/* page background is blue, very simple code */
Background-image:url (small.jpg);

/* page background is a picture named Small.jpg */
Background-repeat:no-repeat;

/* Horizontal Display Picture repeat-x vertical display picture repeat-y not repeat picture no-repeat*/
background-attachment:fixed;

/* When the page has a particularly long scroll bar, you can pin the picture */

Relevant knowledge points:

1. Background map and background color, all set, display the background map.

2. Why do some sites have both background and background color?

Reason 1: Considering that the background of the site is not enough to fill the entire display area under a large screen (such as 1920*1080 or larger), the background color is displayed outside the background, and the edges of the background image must be handled properly to ensure smooth transition to the background color without abrupt feeling.

Reason 2: Not only the page, the Div, the table has a background map should still set a background color (similar to the background map color, at least with the text color significantly different). After all, sometimes the background map can not open the case, in this case if the text is white and the background color is the default white, the text will not be visible. After the completion of a Web page, try to change the folder where the image is stored so that the page renders without graphics, and see if the light text is readable. For CSS files, you should also do the same test once to see if the CSS file is not being called. If the website is opened slowly due to network speed or code redundancy, the picture cannot be loaded to show the background color first.

If you are a black for the main theme of the site, the default background color is white, then the picture is not loaded to complete the first white, resulting in a sense of flicker, visual unfriendly, according to the site's primary color definition of a background color, to reduce visual fatigue (usually first define the background color, and then define the background image, color first)

"CSS Learning notes" background image

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.