Colours, images, repeat, position and size.
✍️ 3 exercises + code challenge in this lessonBackground properties style the area behind an element's content:
background-color: a solid colour.background-image: an image or gradient, e.g. url("bg.jpg") or linear-gradient(...).background-repeat: repeat, no-repeat, repeat-x, repeat-y.background-position: e.g. center, top right.background-size: cover fills the area; contain fits the whole image.background-attachment: fixed: the image stays still while scrolling.The shorthand background sets several of these at once.
Mastering CSS Backgrounds helps you write clean and reliable CSS code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.
<style>
.hero {
height: 160px;
background: url("https://picsum.photos/id/1016/800/400") center / cover no-repeat;
color: white; display: flex; align-items: center; justify-content: center;
font: bold 26px Arial; border-radius: 12px; margin-bottom: 10px;
}
.gradient {
padding: 30px; color: white; border-radius: 12px; font: bold 20px Arial;
background: linear-gradient(135deg, #2563EB, #0EA5E9, #14B8A6);
}
</style>
<div class="hero">background-size: cover</div>
<div class="gradient">A linear gradient background</div>Check what you learned in “CSS Backgrounds”.
Stop the background image from repeating.
body {
background-image: url("bg.png");
background-repeat: ;
}
Which value makes a background image fill the whole element (cropping if needed)?
Give the hero a linear gradient background from #2563eb to #14b8a6.
Free sign-in required · Google login available
Stuck on something?
Ask the community in the CodesInTech forum.
Need a developer?
Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.
Explore Our Services