CSS Background background pictures

Source: Internet
Author: User
Tags set background

First, CSS background background picture-TOP

1. Background image syntax
Background-image:url () Introduction of background image
Background-repeat:no-repeat set whether the background picture is tiled repeatedly
Background-position:left top Set the CSS background positioning of the picture, left to stand on top

Abbreviated Background image syntax:
Background:url (image address) No-repeat left top

2. Background picture setting
Body{background:url (http://www.divcss5.com/img201301/divcss5-logo-2013.gif) no-repeat 0 0}
Here the picture "Http://www.divcss5.com/img201301/divcss5-logo-2013.gif" is set as the background of the Web page is not repeated and is displayed on the left. ,

3, CSS Background map Center

Center horizontally:
Background:url (image address) No-repeat Center Top

Center vertically:
Background:url (image address) No-repeat left 50%
Here 50% is randomly set admitted to 50% distance, details of the specific vertical center need to pass the percentage equalization setting.

4. Background picture general case
Body set Web page background CSS Code
Body{background:url (http://www.divcss5.com/img201301/divcss5-logo-2013.gif) no-repeat 0 0}

CSS Picture background case

Not repeating or uneven picture background

5, div CSS Background Image Center
CSS Background Image Center code:
Body{background:url (http://www.divcss5.com/img201301/divcss5-logo-2013.gif) no-repeat Center 0}
Here we use the "Center" center property, more details to enter the CSS background to understand the basics


Background image centered on Web page

6. Horizontal tile of background picture

CSS background x Landscape Tile code:
Body{background:url (http://www.divcss5.com/img201301/divcss5-logo-2013.gif) Repeat-x}


Y-axis tile picture background horizontally

7, background picture tile vertically

CSS Background y tile code vertically:
Background:url (http://www.divcss5.com/img201301/divcss5-logo-2013.gif) repeat-y

Tile repeating picture background effect:

Vertically tile picture background in vertical y-axis direction

8. Full page background image repeat tile

Picture Background Full Screen page Repeat tile key code:
Body{background:url (Http://www.divcss5.com/img201301/divcss5-logo-2013.gif)}

Picture is displayed as a full screen tile background

Note: There is no setting whether to repeat, whether left to the right, only set the background to introduce pictures can be easily achieved natural full screen tile

Second, CSS background color-TOP

1. Background Background color grammar

Background: #FFF
. Divcss5{background: #FFF}

Set the Divcss5 object background to White

2. Background color case

If we set the page background to be all white, the text color is white

1), corresponding to the background color CSS code and HTML source code:

  2. <html>
  3. <head>
  4. <Meta http-equiv= "content-type" content= "text/html; Charset=utf-8 " />
  5. <title> Untitled document </title>
  6. <style>
  7. Body{background: #000; color: #FFF}
  8. </style>
  9. </head>
  10. <body>
  11. DIVCSS5 background is black; text color is white
  12. </body>
  13. </html>

2), background color and text color case

CSS setting background color and CSS font color

If you want to know the CSS background color and CSS picture background set background basic ENTER: http://www.divcss5.com/rumen/r125.shtml

Three, background for color and for the picture summary-TOP

We use CSS background set the image for the background of the Web page, the picture for the background of the various styles, including whether the background picture is centered, whether the background image is repeated tile display, whether the background image is fixed position background style, the above knowledge points and case points hope that you can copy the above code practice observation to master.

Extended reading:
CSS text color
CSS Font Color
CSS Background
CSS background

CSS Background background pictures

Related Article

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.