Css Background

CSS Background:

The background-property : the default : or identical to the background (0,0) (0,0).

Here's a breakdown of some common background properties and their examples:

Background Color:

Specifies the background shade of an element.

                          
                            body {
                                background-color: #f2f2f2; /* light gray */
                            }

Background Image:

Establishes the background with an image. You can choose either the relative or the absolute form of URL.

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

Background Repeat:

Tells how a background image should be displayed. An image can be shown repeated automatically, or only once, depending on the desired effect.

                          
                            section {
                                background-image: url('pattern.png');
                                background-repeat: repeat-x; /* repeat horizontally */
                            }

Background Position:

Takes the top left corner or an existing background image as an anchor.

                          
                            div {
                                background-image: url('icon.png');
                                background-position: top right; /* position at the top right corner */
                            }

Background Size:

Makes the background image (limited) in size

                          
                            article {
                                background-image: url('background-image.jpg');
                                background-size: cover; /* cover the entire container */
                            }

Multiple Background Images:

Suppose you want to put multiple pictures on a single element for this purpose.

                          
                            section {
                                background-image: url('pattern1.png'), url('pattern2.png');
                                background-repeat: repeat, no-repeat;
                                background-position: top left, bottom right;
                            }

Gradient Background:

Create a background using in the either of linear-gradient or radial-gradient.

                          
                            button {
                                background: linear-gradient(to right, #ff8c00, #ffc107); /* orange to yellow gradient */
                            }

Then, it presents you with other immediate examples to illustrate the likes of background elements styling in CSS.