CSS background properties


In the previous CSS lesson readers have read with Taimienphi.vn to learn syntax and selector in CSS, in the next lesson below, Taimienphi.vn will introduce you the background attribute in CSS.


Properties background in CSS Used to define background effects for elements.

CSS background properties

CSS background properties include:

– Background-color attribute.
– Background-image attribute.
– Background-repeat attribute.
– Background-attachment attribute.
– Background-position attribute.

CSS background properties

1. The Background Color property in CSS

The background-color property in CSS is used to specify the background color for an element.

smoke background in css

The output will look like the following:

smoke background in css 2

In CSS, colors are usually specified by:

– Valid color names, such as “Red”.

– HEX values ​​like “# ff0000”.

– RGB values ​​like “rgb (255,0,0)”.

Readers can refer to the color article in CSS on Taimienphi.vn to learn the list of valid color values.

Example 2:

smoke background in css 3

The output will look like the following:

smoke background in css 4

2. Background Image attribute in CSS

The background-image attribute in CSS specifies the image to be used as the background of the element.

By default the background image is repeated to cover the entire element.

Example 1:

smoke background in css 5

The output will look like the following:

smoke background in css 6

Example 2:

The following example illustrates the wrong way to use text and wallpaper combination:

smoke background in css 7

The output will look like the following:

smoke background in css 8

As you can see in the output above, the text displayed on the background is very difficult to read.

Note: When using wallpapers, it’s best not to select and use distracting wallpapers.

3. Repeat the background image horizontally or vertically in CSS

By default the background-image attribute repeats the wallpaper horizontally or vertically.

Example 1:

In the example below, the background image is repeated horizontally and vertically, so it looks strange:

smoke background in css 9

The output will look like the following:

smoke background in css 10

Example 2:

In the example below the background image is only repeated horizontally (background-repeat: repeat-x;):

smoke background in css 11

The output will look like the following:

smoke background in css 12

Note: To repeat the wallpaper vertically, we set: background-repeat: repeat-y;

4. Set wallpaper position in CSS

Properties background-repeat Only show wallpaper 1 time, don’t repeat.

Example 1:

smoke background in css 13

The output will look like the following:

smoke background in css 14

In the example above, the background image is displayed in the same position as the text, so it looks a bit confusing. However, we can change the position of the background image so it does not affect the text.

To specify the position of the wallpaper, we use the attribute background-position.

Example 2:

smoke background in css 15

The output will look like the following:

smoke background in css 16

5. Set fixed wallpaper position

To set the position of the fixed background image, scrollable, we use the attribute background-attachment.

For example:

smoke background in css 17

The output will look like the following:

smoke background in css 18

6. Shorten the Background property

To shorten the code, we can specify all background properties in a single attribute. This method is also known as shorthand property.

Shorten the property of the background to background.

For example:

smoke background in css 19

The output will look like the following:

smoke background in css 20

When using attribute shortening, the order of attribute values ​​will be:

background-color

background-image

background-repeat

background-attachment

background-position

7. Background properties in CSS

In the table below, Taimienphi.vn lists all the Background properties in CSS:

smoke background in css 21

Property Description

background Set all background properties in one declaration.
background-attachment Set whether the wallpaper is fixed or scrollable.
background-clip Specifies the position for the wallpaper.
background-color Sets the background color for the elements.
background-image Sets the background image for the element.
background-origin Specifies the position of the background image to be fixed.
background-position Sets the start position of the wallpaper.
background-repeat Set how to repeat the background image.
background-size Specifies the size of the wallpaper.

https://thuthuat.taimienphi.vn/thuoc-tinh-background-in-css-48841n.aspx
So the above CSS lesson Taimienphi.vn has just introduced you to the background properties in CSS. In the next lesson, Taimienphi.vn will introduce more properties to you font in CSS Please.

.

Add a Comment

Your email address will not be published. Required fields are marked *