The background color

Set the background color of the element: background – color: color | transparent

Transparent is shorthand for transparent black, similar to rgba (values like 0,0,0,0)

Color (RGB | | hexadecimal color name

The background area includes the content, padding and border, not the margin.

The background image

Set the elements of the background image background – image: URL | none

Url addresses can be relative or absolute: : : If the style sheet is externally linked, write the path from CSS to the image instead of starting from HTML

The background of an element takes up all of the dimensions of the element, including the inner margins and borders, but not the margins

By default, the background image is in the upper left corner of the element and is repeated horizontally and vertically.

Pay attention to the background image: url ();

If the background image has a transparent area, you can see the background of the page by using the background-image: color URL (); Set the fill color in front of the URL. Set the transparent area to the color you want. It’s like changing the background of the picture…

<style>
        div {
            width:300px;
            height:300px;
            background-image:url();
        }
    </style>
Copy the code

Background image repetition

Set the elements of the background image background – repeat repeat way: repeat (x direction and y direction are repeated) | no – repeat (x direction and y direction are not repeated) | repeat – x (x direction to repeat only) | repeat – y (y direction to repeat only)

Pay attention to

When setting the background of a web page, use some pictures that can be seamlessly stitched to tile the entire web page using repeated attributes.

case

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta "> <title>Document</title> <style> div {width:500px; height:500px; margin-bottom:20px; background-image:url(logo.png); border: 1px solid #000; } .box1 { background-repeat:repeat; } .box2 { background-repeat:repeat-x; } .box3 { background-repeat:repeat-y; } .box4 { background-repeat:no-repeat; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> </body> </html>Copy the code