Understanding CSS Background Property: Basics, Advanced Techniques, and Practical Examples
This article provides a comprehensive guide to the CSS background property, covering its syntax, individual sub‑properties, tables of default values, basic usage examples, advanced topics such as multiple images, gradients, positioning, sizing, attachment, and even the experimental element() function, all illustrated with clear code snippets and visual diagrams.
Introduction
The CSS background property is a shorthand that defines all background‑related aspects of an element, including color, image, origin, size, repeat, and more. MDN describes it as a shorthand for setting background‑color, background‑image, background‑origin, background‑size, background‑repeat, background‑attachment, and background‑position.
Background Basics
Typical syntax follows the order: background-color , background-image , background-repeat , background-attachment , background-position . The order is recommended but not mandatory.
Property
Description
Default
Version
background-color
Specifies the background colour
transparent
CSS2.1
background-position
Specifies the position of the background image
0% 0%
CSS2.1
background-image
Specifies one or more background images
none
CSS2.1
background-repeat
Specifies how the background image repeats
repeat
CSS2.1
background-attachment
Sets whether the background scrolls with the page or is fixed
scroll
CSS2.1
background-size
Specifies the size of the background image
auto
CSS3
background-origin
Specifies the positioning area of the background image
padding-box
CSS3
background-clip
Specifies the painting area of the background image
border-box
CSS3
Example of a basic background declaration:
<style>
.div1 {
width: 100px;
height: 100px;
background-color: black;
background-image: url('img1');
background-size: 50%;
background-repeat: no-repeat;
}
</style>
<body>
<div class="div1"></div>
</body>Sub‑properties
background-color : can be set with a keyword, hex value, or rgb() function.
background-image : accepts url('...') and can list multiple images separated by commas.
background-size : accepts percentages, pixel values, or the keywords contain and cover .
background-repeat : values include repeat , repeat-x , repeat-y , no-repeat , space , and round .
Background Advanced Topics
Multiple Background Images
CSS3 allows multiple background images, each with its own size, repeat, and position values, separated by commas. If the number of values does not match the number of images, the first value is reused for the missing ones.
<style>
.div1 {
width: 100px;
height: 100px;
background-color: black;
background-image: url('img1'), url('img2');
background-size: 50%, 100%;
background-repeat: repeat-x, no-repeat;
}
</style>
<body>
<div class="div1"></div>
</body>Linear Gradient
Linear gradients are defined via background-image: linear-gradient(...) . The direction can be an angle or keywords such as to left . Example:
<style>
.div1 { background-image: linear-gradient(#71c9ce, #e3fdfd); }
</style>
<body>
<div class="div1"></div>
</body>Radial Gradient
Radial gradients use background-image: radial-gradient(...) . Example:
<style>
.div1 { background-image: radial-gradient(#71c9ce, #e3fdfd); }
</style>
<body>
<div class="div1"></div>
</body>Repeating Gradients
Both linear and radial gradients can repeat using repeating-linear-gradient and repeating-radial-gradient .
Background Position
The default position is the top‑left corner of the padding-box . Values can be percentages, pixels, or keywords such as top , right , center . Example:
<style>
.div1 {
width: 100px;
height: 100px;
background-image: url('img1');
background-size: 50%;
background-repeat: no-repeat;
background-position: right;
}
</style>
<body>
<div class="div1"></div>
</body>Background Repeat – Space and Round
space repeats the image without scaling and distributes the remaining space evenly; round scales the image to fill the container, possibly distorting it.
Background Origin
Controls the reference box for background-position . Values: content-box , padding-box (default), and border-box .
Background Clip
Determines the painting area of the background. Values mirror those of background-origin and default to border-box .
Background Size – Contain and Cover
contain scales the image to fit within the container while preserving aspect ratio; cover scales the image to completely cover the container, possibly cropping it.
Background Attachment
fixed makes the background stay in place while the page scrolls; scroll (default) moves the background with the content.
Experimental Property: background: element()
Firefox‑only syntax that allows an element to be used as a background. Example:
<style>
.div {
width: 200px;
height: 200px;
background: element(#button) no-repeat;
background: -moz-element(#button) no-repeat;
}
#button {
width: 150px;
height: 20px;
margin: 50px;
color: #0470f4;
}
</style>
<body>
<div class="div">
<button id="button">这是按钮</button>
</div>
</body>Conclusion
CSS offers a rich set of background features that go far beyond simple colour fills. Understanding each sub‑property and how they interact enables developers to create sophisticated visual effects while maintaining control over layout and performance.
References
Translation – CSS3 Backgrounds (https://www.zhangxinxu.com/wordpress/2011/05/翻译-css3-backgrounds相关介绍/#comments)
CSS3 background element() introduction (https://www.zhangxinxu.com/wordpress/2011/07/css3-background扩展属性element简介/)
CSS3 summary – background/gradient functions (https://www.cnblogs.com/ZheOneAndOnly/p/10786375.html)
Call to Action
If you found this article helpful, please click "Seen" to let more people discover it, and follow the public account "政采云前端团队" for more curated content.
Recruitment
政采云前端团队 (ZooTeam) is a young, passionate front‑end group based in Hangzhou, with over 50 engineers, many of whom are full‑stack. We work on material systems, engineering platforms, performance, cloud applications, data analysis, and visualization. If you are interested in joining, send your resume to [email protected] .
政采云技术
ZCY Technology Team (Zero), based in Hangzhou, is a growth-oriented team passionate about technology and craftsmanship. With around 500 members, we are building comprehensive engineering, project management, and talent development systems. We are committed to innovation and creating a cloud service ecosystem for government and enterprise procurement. We look forward to your joining us.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.