Advertisement

Google Ad Slot: content-top

CSS Backgroud


In CSS, the background property is used to define the background styling of an element. It can be used to set a background color, image, position, and more. Here's a breakdown of how to use the background-related properties in CSS:

Background Format Description
Background Color Sets the background color of an element.
Background Image Sets an image as the background of an element.
Background Repeat Controls if/how the background image is repeated.
Background Position Sets the position of the background image.
Background Size Specifies the size of the background image.
Background Attachment Determines if the background image scrolls with the page or stays fixed.
Background Shorthand You can combine multiple background properties into a shorthand property.

Background Color:

Sets the background color of an element.


Syntax:

background-color: color | transparent | initial | inherit;
Example
body {
background-color: lightblue;
}
Try it yourself

Background Image:

Sets an image as the background of an element.


Syntax:

background-image: url('url') | none | initial | inherit;
Example
body {
background-image: url('/assets/images/background.jpg');
}
Try it yourself

Background Repeat:

Controls if/how the background image is repeated.


Syntax:

background-repeat: repeat | repeat-x | repeat-y | no-repeat | space | round | initial | inherit;
Example
body {
background-image: url('/assets/images/background.jpg');
background-repeat: no-repeat; /* Prevents repeating */
}
Try it yourself
Try It:
repeat
no-repeat
repeat-x
repeat-y
See Text Color

Currently Active Property:

background-repeat : repeat;
background-image : url('/assets/images/background.jpg');

Background Position:

Sets the starting position of the background image.


Syntax:

background-position: value;
Example
body {
background-image: url('/assets/images/background.jpg');
background-repeat: no-repeat; /* Prevents repeating */
background-position: center; /* Centers the image */
}
Try it yourself
Try It:
top
left
right
bottom
center
top left
top right
bottom left
bottom right
50% 10%
50px 10px
See Text Color

Currently Active Property:

background-image : url('/assets/images/background.jpg');
background-repeat : no-repeat;
background-position : top;

Background Size:

Specifies the size of the background image.


Syntax:

background-size: auto | length | cover | contain | initial | inherit;
Example
body {
background-image: url('/assets/images/background.jpg');
background-repeat: no-repeat; /* Prevents repeating */
background-size: cover; /* Scales the image to cover the entire element */
}
Try it yourself
Try It:
cover
contain
100px 200px
See Text Color

Currently Active Property:

background-image : url('/assets/images/background.jpg');
background-repeat : no-repeat;
background-size : cover;

Background Attachment:

Determines whether the background scrolls with the page or remains fixed.


Syntax:

background-attachment: scroll | fixed | local | initial | inherit;
Background-attachment:fixed Example
body {
background-image: url('/assets/images/tree.png');
background-repeat: no-repeat; /* Prevents repeating */
background-position: right top;
margin-right: 200px;
background-attachment: fixed;
}
Try it yourself
Background-attachment:scroll Example
body {
background-image: url('/assets/images/tree.png');
background-repeat: no-repeat; /* Prevents repeating */
background-position: right top;
margin-right: 200px;
background-attachment: fixed;
}
Try it yourself

Background Shorthand:

You can combine several background properties into one shorthand.


Syntax:

background = background-color | bg-image | bg-position / bg-size | repeat-style | attachment | box;
Example
body {
background: red url(/assets/images/background.jpg) center / 40% 40% no-repeat fixed padding-box content-box;
}
Try it yourself