May 03, 2021 CSS
4. Background image - horizontal or vertical tile
6.. Background Image - Set positioning and uneven
CSS background properties are used to define the background of HTML elements.
The CSS property defines the background effect:
background-color
background-image
background-repeat
background-attachment
background-position
background-color
defines the background color of the element.
The background color of the page is used
body
selector:
In CSS, color values are typically defined as follows:
In the following examples,
h1
p
div
elements have different background colors:
Tip: You
can set the background color for all elements,
body
em
up to em and
a
Tip:
background-color
be inherited, and its default value is
transparent
If an element does not specify a background color, the background is transparent so that the background of its parent element is visible.
background-image
describes the background image of the element.
By default, the background image is tiled and repeated to cover the entire element entity.
Page background picture settings instance:
Here is an example of a poor combination of text and background images. Poor readability of text:
If you need to tile the background image on an HTML page, you can use
background-repeat
property.
By
background-image
property is tiled horizontally or vertically on the page.
Some images look out of alignment if they are tiled horizontally and vertically, as follows:
The page background is better if the image is only tiled horizontally
(repeat-x)
Let the background image not affect the layout of the text
If you don't want the image tiled, you can
background-repeat
property:
In the above example, the background image and text are displayed in the same place, in order to make the page layout more reasonable, does not affect the reading of the text, we can change the position of the image.
You can use
background-position
to change the position of the image in the background:
Tip: There
are many ways to provide values for
background-position
properties. F
irst, you can use some keywords:
top
bottom
left
right
and
center
Different types of values differ slightly in the placement of background images.
Image placement keywords are most easily understood to work just as well as the meaning of their names.
For example,
top
left
the image in the upper-left corner of the margin area within the element.
As long as you guarantee no more than two keywords: one for horizontal direction and one for vertical direction, you can set the location keywords to appear in any order.
If there is only one keyword, the other keyword is center by
center
So if you want an image to appear above the middle of each paragraph, just declare the following:
p
{background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:top;}
Here are the equivalent location keywords:
Single keyword | Equivalent keyword |
---|---|
center | center center |
top | TOP Center or Center Top |
bottom | Bottom Center or Center Bottom |
right | Right Center or Center Right |
left | Left center or center left |
Percentage values are more complex to represent. Suppose you want to center an image in its element with a percentage value, and you can set it up by following this code:
body
{background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:50% 50%;}
This causes the image to be placed appropriately, with its center aligned to the center of its element.
Therefore, if you want to place an image horizontally 2/3 and vertically 1/3, you can declare this:
body
{background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:66% 33%;}
The length value explains the offset in the upper-left corner of the element's margin area, which is the upper-left corner of the image.
For example, if you set the value to 50px 100px, the upper left corner of the image will be 50 pixels to the right in the upper left corner of the inner margin area of the element and 100 pixels down:
body
{background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:50px 100px;}
Note that this is different from the percentage value because the offset is only from one upper left corner to the other upper left corner.
That is, the upper-left corner of the image
background-position
point in the background-position declaration.
In the above example we can see that the background color of the page is controlled by a number of properties.
To simplify the code for these properties, we can combine them in the same property.
The short-case property of the background color is "background":
When short-case properties are used, the order of property values is:
background-color
background-image
background-repeat
background-attachment
background-position
The above properties do not need to be used in full, you can follow the actual needs of the page to use.
This instance uses the CSS described earlier, and you can view the instance: the CSS instance
How to set a fixed background image
This example shows how to set a fixed background image.
The image does not scroll with the rest of the page.
Property | describe |
---|---|
background | Short-write properties, the role is to set the background attribute in a declaration. |
background-attachment | Background image is fixed or scrolled with the rest of the page. |
background-color | Set of elements background color. |
background-image | Set the image as a background. |
background-position | Set the starting position of the background image. |
background-repeat | Set whether or not the background image is repeated. |