Posts in current category

CSS Backgrounds (background)


May 03, 2021 21:00 CSS


Table of contents


CSS background


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

The background color

background-color defines the background color of the element.

The background color of the page is used body selector:

body {background-color:#b0c4de;}

Try it out . . .

In CSS, color values are typically defined as follows:

  • Hetean - e.g. "#ff0000"
  • RGB - e.g.: "rgb (255,0,0)"
  • Color name - e.g. "red"

In the following examples, h1 p div elements have different background colors:

h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}

Try it out . . .

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.


The background image

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:

body {background-image:url('paper.gif');}

Try it out . . .

Here is an example of a poor combination of text and background images. Poor readability of text:

body {background-image:url('bgdesert.jpg');}

Try it out . . .


Background image - horizontal or vertical tile

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:

body
{background-image:url('gradient2.png'); }

Try it out . . .

The page background is better if the image is only tiled horizontally (repeat-x)

body
{background-image:url('gradient2.png');
background-repeat:repeat-x;}

Try it out . . .


Background Image - Set positioning and uneven

CSS Backgrounds (background) Let the background image not affect the layout of the text

If you don't want the image tiled, you can background-repeat property:

body
{background-image:url('img_tree.png');
background-repeat:no-repeat;}

Try it out . . .

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:

body
{background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;}

Try it out . . .

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.

Keywords

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:

单一关键字 等价的关键字
center center center
top top center 或 center top
bottom bottom center 或 center bottom
right right center 或 center right
left left center 或 center left

Percentage value

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

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.


Background - Short-case properties

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":

body {background:#ffffff url('img_tree.png') no-repeat right top;}

Try it out . . .

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


CSS Backgrounds (background)

More instances

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.


CSS background properties

Property 描述
background 简写属性,作用是将背景属性设置在一个声明中。
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
background-color 设置元素的背景颜色。
background-image 把图像设置为背景。
background-position 设置背景图像的起始位置。
background-repeat 设置背景图像是否及如何重复。