DEV Community

Share Point Anchor
Share Point Anchor

Posted on • Originally published at sharepointanchor.com on

CSS background Property

#learncss #cssb

The CSS background is used to set all background style properties. This is one of the CSS3 properties.

  • The Background property includes the following properties.
    • background-color
    • background-image
    • background-repeat
    • background-position
    • background-origin
    • background-clip
    • background-attachment
    • background-size

Syntax: 

 background: bg-color bg-image bg-position bg-size bg-repeat bg-origin bg-clip bg-attachment | initial | inherit;
Enter fullscreen mode Exit fullscreen mode

Values:

Value Description
background-color It is used to set the background color.
background-image This property will set one or more image s.
background-position It specifies the position of the background images.
background-size This property sets the size of the background image.
background-repeat With this property, you can specify how to repeat the background images.
background-origin It will specify the positioning area of the background imag e.
background-clip This property specifies the painting area of the background image.
background-attachment Specifies whether the image is fixed or not.
initial It will set this property to its default value.
inherit Inherits this property from its parent element.

Example of the background property:

This is an example code for the background property.

 <!DOCTYPE html> <html> <head> <style> body { background: #A4FDF1; } </style> </head> <body> <h2>Background property Example</h2> <p>Here the background color is set to blue.</p> </body> </html>
Enter fullscreen mode Exit fullscreen mode

Result:

By running the above code, you will get the result as shown in the below image.

Background property

Example of Background Property with an Image:

In the following code, we use the background property with an image applied to it.

 <!DOCTYPE html> <html> <head> <style> body { background: url("https://sharepointanchor.com/wp-content/uploads/2021/02/Flat-Mountains.png"); } </style> </head> <body> <h2>Background property example</h2> <p>Here a background image is used.</p> </body> </html>
Enter fullscreen mode Exit fullscreen mode

Result:

By executing the above code, you will get the result as shown in the below screenshot.

Background property with image

Example of Background Property with Different Values:

In the following code, we use different background properties. Check them below.

 <!DOCTYPE html> <html> <head> <style> body { background: #ccc url("https://sharepointanchor.com/wp-content/uploads/2021/02/Flat-Mountains.png") no-repeat fixed center; } </style> </head> <body> <h2>Background property example</h2> <p>In this example background property specifies the background color, the background-image property to set the image to the background, background-repeat to specify the image to be non repeated, background-attachment to specify the image to be fixed and background-position to specify the image to be in the center.</p> </body> </html>
Enter fullscreen mode Exit fullscreen mode

Result:

After executing the above code, you can get the output as shown in the below screenshot.

Background property with different values

Example of the background-size property:

The following example uses the background-size property to specify the size of the background.

 <!DOCTYPE html> <html> <head> <style> body { background: #eee url("https://sharepointanchor.com/wp-content/uploads/2021/02/Radiant-Gradient.png") no-repeat center 100px; background-size: cover; } </style> </head> <body> <h2>Background property example</h2> <p>Here the size for the background is set to cover.</p> </body> </html>
Enter fullscreen mode Exit fullscreen mode

Result:

By executing the above code, you will see the result as shown in the below image.

background size property

Example of background-clip property:

In this code, the background-clip property specifies how far the background should extend within an element.

 <!DOCTYPE html> <html> <head> <style> div { border: 8px dotted #B9B0FD; padding: 25px; background: #B9B0FD; background-clip: padding-box; } </style> </head> <body> <h2>Background property example</h2> <div> <p>The background-clip for this div element is set to padding-box.</p> </div> </body> </html>
Enter fullscreen mode Exit fullscreen mode

Result:

After running the above code, you will get the output as shown in the below image.

Output of background-clip property

Example of background-origin property:

In this example, the background-origin property is used. Here, the background image starts from the upper-left corner.

 <!DOCTYPE html> <html> <head> <style> div { border: 10px double #ccc; padding: 25px; background: url("https://sharepointanchor.com/wp-content/uploads/2021/02/Radiant-Gradient.png"); background-repeat: no-repeat; background-origin: padding-box; } </style> </head> <body> <h2>Background property example</h2> <p>Here background-origin: padding-box (default) is set.</p> <div></div> </body> </html>
Enter fullscreen mode Exit fullscreen mode

Result:

Run the above code and get the result as shown in the below image.

Background-origin property

Browser-Support:

Browser-support

The post CSS background Property appeared first on Share Point Anchor.

Top comments (0)