PHP Full Stack Development (eight): Cssⅲbackground

Set the background color:

Div {    background-color:#b0c4de;}

You can set the background color for the body tag as well as the background color for the p,div,h tag.

To set a background image:

Body {    background-image:url (' image/bg1.gif ');    }

The URL is followed by the path to the background picture.

If our background image is a small square, then this small box will be tiled by default along the X and Y axes.

But some of the pictures are graded along the y-axis, so it's weird to tile along the y-axis.

So we can set this background image to just tile along the x-axis and use this code:

Body {    background-image:url (' image/bg2.gif ');         background-repeat:repeat-x;}

Represents a tile only along the x-axis, repeat-y means that it is tiled only along the y-axis

If you don't want the picture to be tiled, use

Body {    background-image:url (' image/bg2.gif ');         background-repeat:no-repeat;}

Some pictures, if we put on the top, then with the page scrolling, it will not.

Of course we don't want this to happen! We want it to stay there!!

How do we do that, using the following code:

Body {    background-image:url (' image/a1.jpg ');     background-repeat:no-repeat;     background-position:top;     background-attachment:fixed;}

First we define a smaller picture as the background.

Then of course, this image can not be tiled, the default tile properties of the picture is removed.

Then we put it in the middle of the top.

And then the value of the background-attachment here is fixed.

There are three kinds of attribute values in Background-attachment, one is scroll, which means to follow the page scrolling, if not set, this is the default.

One is fixed, which means that it is stationary.

There is also a inherit that inherits from the parent element.

We see a property above that we didn't introduce, that's background-position .

This indicates where the background image is located and can be set to the following property values:

Background-position:left top;background-position:left center;background-position:left bottom;background-position: Right top;background-position:right center;background-position:right bottom;background-position:center top; Background-position:center Center;background-position:center Bottom;

are horizontal and vertical coordinate values, respectively. If you specify only one item, then the other defaults to the center

In addition to specifying these locations, you can specify the location of the image using some common units in the CSS.

For example, both horizontal and vertical percent% and pixel px can be

Body {    background-image:url (' image/a1.jpg ');     background-repeat:no-repeat;     background-position:1000px 500px;     background-attachment:fixed;     background-size:200px;}

The above code specifies that the position is basically the bottom right corner of the page.

There is also a problem that we often encounter when specifying a background image.

Is that when we set the background picture, often download the picture is very large, the pixel is very high, if according to the image original pixel proportion output, then for our page is not suitable.

Do we need to re-use PS or other software to make image pixel adjustments?

This is a lot of trouble. The same CSS provides properties for setting the size of the background image

is the background-size set above.

The value of this property is as follows, one is the common CSS unit, percent% or pixel px can be.

This background-size property of the CSS tutorial we do not see the first page, we have to go to the CSS reference manual to see the CSS properties, there is a list of CSS properties, for our reference.

Of course background In addition to these commonly used properties, there are a few other less commonly used properties, can be found in the CSS property list.

Today, our CSS background properties are explained here.

Let's recap what this section background, this is used to set the background of various labels, the background can be pure color, can also be a picture. If it is a picture also provides the location of the picture, size, whether with the page movement and other property values can be set, can be said to be very comprehensive. But always remember that this is the background setting property, not the Picture property.

Today's content is here.

PHP Full Stack Development (eight): Cssⅲbackground