background
Anonymous contributor
Published Jun 30, 2021Updated Oct 14, 2023
Contribute to Docs
Shorthand way of expressing the various background properties of one or more element backgrounds in any order using a single declaration.
Syntax
background: <value>;
where <value>
can be any of the following:
- Attachment value:
scroll
,fixed
- Blend mode value:
dark
,light
- Clip value:
content-box
,padding-box
,border-box
- Color value:
rgba(255, 0, 255, 0.3)
- Image value:
url('cat.png')
- Origin value:
content-box
,padding-box
,border-box
- Position value:
top
,50% 50%
- Repeat value:
repeat
,repeat-x
,round
- Size value:
contain
,cover
Example 1
Sets rebeccapurple
as the background color:
body {background: rebeccapurple;}
This will display:
Example 2
Specifies the background-color, the background-image property to set the image to the background, background-repeat to specify the image to not be repeated, background-attachment to specify the image to be fixed and background-position to specify the image to be in center:
body {background: blue url('whale.png') no-repeat fixed center;}
This will display:
Contribute to Docs
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.
Learn CSS on Codecademy
- Career path
Front-End Engineer
Front-end engineers work closely with designers to make websites beautiful, functional, and fast.Includes 34 CoursesWith Professional CertificationBeginner Friendly115 hours - Career path
Full-Stack Engineer
A full-stack engineer can get a project done from start to finish, back-end to front-end.Includes 51 CoursesWith Professional CertificationBeginner Friendly150 hours - Free course
Learn CSS
In this CSS tutorial, you’ll learn how to add CSS to visually transform HTML into eye-catching sites.Beginner Friendly6 hours