Background property
➔ The background property is a shorthand and it is possible to specify all background properties with this single property.
body {
background-color: #ffffff;
background-image: url("image_name.png");
background-repeat: no-repeat;
background-position: right top;
}➔ Shorthand Property Background can do the above in one line.
➔ No ordering is required for other background properties, only the bg-size value can be included immediately after the bg-position, separated by the / character.
➔ background: url('myimage.png') 10% 10% / 80% 80% repeat scroll border-box padding-box;
➔ For example: 10 pixels 10 pixels / 80% 80% means that the background image is 80% of the height and width of the element, and is positioned 10 pixels from the top and 10 pixels from the left in the top-left corner of the element.
Syntax
background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
Property values
| Name | Value | Description |
|---|---|---|
| background-color | Ex: red, #FF0000, rgb(255,0,0), transparent, initial. | Sets a solid color. |
| background-image | url('myimage.png'), none (default), linear-gradient() | Sets an image. |
| background-position | center, top, bottom, left, right, percentages (e.g., 50% 50%), pixels. | Sets starting point. |
| background-size | auto (default), cover (fills container, may crop), contain (fits in container), 100px 50px (specific size). | Scales the size of the image. |
| background-repeat | repeat (default), repeat-x, repeat-y, no-repeat | Specifies image tiling |
| background-origin | padding-box (default), border-box, content-box. | Determines the positioning area of the background image. |
| background-clip | border-box (default), padding-box, content-box | Defines where the background is painted |
| background-attachment | scroll (default), fixed, local | Fixes the image in the viewport or scrolls with the content. |
| initial | initial | Sets the property to its default value. |
| inherit | inherit | The element inherits the property value from its parent element. |
Example
body {
background: #ffffff url("resources/images/mountain.jpg") no-repeat right top;
}Click on the "Try it Now" button to see how it works.
When using the shorthand property the order of the property values is optional.
background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position
Note: Shorthand Property Background can do the above in one line.
Example (multiple background-image)
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS background multiple image Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<style>
div {
background-image: url("resources/images/flowers-rose-t.png"), url("resources/images/flowers-rose2-t.png");
background-position: left top, right top;
background-repeat: no-repeat, no-repeat;
background-size: 100px, 100px;
background-color: #f2d2d2;
border-radius: 10px;
}
p {
color: black;
padding: 10px 10px;
margin: 5px;
}
</style>
</head>
<body>
<div>
<h1>CSS background Example</h1>
<p>To use multiple background images in CSS, you can specify them as a comma-separated list within the
background-image property or the background shorthand property.</p>
<p> The first image in the list will be the topmost layer, and subsequent images are layered behind it.</p>
</div>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.
Example (multiple background)
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS background multiple image Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<style>
div {
background:
url("resources/images/animals-buffalo-t.png") left top/150px no-repeat,
url("resources/images/animals-goat-t.png") top center/150px no-repeat,
url("resources/images/animals-cow-t.png") right top/150px no-repeat;
/* background-size: 150px, 200px,200px; */ /* This will also works */
min-hgight:230px;
background-color: #f2e2e2;
border-radius: 10px;
}
p {
color: black;
padding: 10px 10px;
margin: 5px;
}
</style>
</head>
<body>
<div>
<h1>CSS background Example</h1>
<p>To use multiple background images in CSS, you can specify them as a comma-separated list within the
background-image property or the background shorthand property.</p>
<p> The first image in the list will be the topmost layer, and subsequent images are layered behind it.</p>
</div>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.