CSS Background background pictures

Last Update:2018-08-02 Source: Internet

Author: User

Tags set background

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

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

Center

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}

Case:

Y-axis tile picture background horizontally

7, background picture tile vertically

CSS Background y tile code vertically:
body{
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:

<! DOCTYPE HTML>
<html>
<head>
<Meta http-equiv= "content-type" content= "text/html; Charset=utf-8 " />
<title> Untitled document </title>
<style>
Body{background: #000; color: #FFF}
</style>
</head>
<body>
DIVCSS5 background is black; text color is white
</body>
</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

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More