CSS Backgrounds - A Complete Guide to Background Properties

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 {

}

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-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-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-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-repeat: no-repeat; /* Prevents repeating */

background-position: right top;

margin-right: 200px;

background-attachment: fixed;

}

Try it yourself

Background-attachment:scroll Example

body {

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

❮ Previous

Next ❯

Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.