CSS Tutorial
CSS Backgrounds
Paint the box behind content: color, image, position, repeat, and size.
Behind the content
A background sits in the padding box by default: behind the text, inside the border. It does not push other elements away. Color fills the area. An image can sit on top of that color where the picture is missing or transparent.
You will use five properties most days: background-color, background-image,background-position, background-repeat, and background-size. A shorthand, background, can set several at once.
background-color
background-color fills the box. Named colors, hex, rgb, and hsl all work. Keep text contrast in mind: a sky panel wants dark or white copy, not mid-gray.
Example
<style>
h1 {
color: teal;
}
.banner {
background-color: #0284c7;
color: #fff;
padding: 1rem 1.1rem;
}
p {
color: #475569;
}
</style>
<h1>Harbor studio</h1>
<p class="banner">Open 8–16.</p>
<p>The hours sit on a sky panel.</p>background-image
background-image: url("…") places a picture behind the content. The URL can be a path on your site or a full address. These examples use a harbor-sized photo from picsum so the preview has something to fetch.
Example
<style>
h1 {
color: #0c4a6e;
}
.hero {
background-color: #0284c7;
background-image: url("https://picsum.photos/seed/harbor/800/200");
color: #fff;
padding: 2rem 1.1rem;
min-height: 4rem;
}
p {
color: #475569;
}
</style>
<h1>Harbor studio</h1>
<div class="hero">Open 8–16.</div>
<p>Color shows if the image is slow or missing.</p>Always set a background-color under an image. If the file 404s or the visitor is on a slow quay connection, the color is still there and the text can still read.
Position, repeat, and size
By default a small image tiles. background-repeat: no-repeat draws it once.background-position places that copy: keywords such as center,top right, or lengths like 20px 0.
background-size scales the image. cover fills the box and may crop.contain fits the whole picture and may leave gaps (filled by the color). A length such as100% 200px sets width and height yourself.
| Property | Useful values |
|---|---|
background-repeat | repeat, no-repeat, repeat-x |
background-position | center, top, 40% 20% |
background-size | cover, contain, 800px 200px |
Example
<style>
h1 {
color: teal;
}
.hero {
background-color: #0c4a6e;
background-image: url("https://picsum.photos/seed/harbor/800/200");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
color: #fff;
padding: 2rem 1.1rem;
}
p {
color: #475569;
}
</style>
<h1>Harbor studio</h1>
<div class="hero">Open 8–16.</div>
<p>Cover fills the banner; center keeps the photo’s middle in view.</p>The background shorthand
background can pack color, image, repeat, position, and size. Size belongs after position, separated by a slash: center / cover. Put color first or last — both work — but keep one order in a project.
Example
<style>
h1 {
color: teal;
}
.hero {
background: #0284c7 url("https://picsum.photos/seed/harbor/800/200") no-repeat center / cover;
color: #fff;
padding: 2rem 1.1rem;
}
p {
color: #475569;
}
</style>
<h1>Harbor studio</h1>
<div class="hero">Open 8–16.</div>
<p>One property, same banner as the long form.</p>Click Try it in CSS and switch cover to contain. The sky color fills the gaps. That editor is /css/try.
What to remember
Color first, then image, then how that image sits. A banner almost always wants no-repeat, a position, and cover or a fixed height. Next chapter: the line around the box — borders.
Worked examples
The short listings above show one property. These sheets paint documents you would actually ship: a lab dashboard, a clinic form, a marks table, a nav bar.
CSS does not invent meaning. HTML already said what the pieces are. Cascade, specificity, and the box model decide how they look. The numbers are classroom values — current, pH, pulse, 3-4-5 — so the style has something real to sit on.
Preview them in the CSS editor at /css/try. Change one property and watch the page paint. The tags stay the same.
Astronomy
A night-sky panel
background-color fills the padding box. An image sits on top of that colour. If the photo fails, the colour is still there — pick a dark fallback for a sky shot.
background-size: cover scales the image to fill, cropping if needed. contain letterboxes. center places the focal point.
Example
<style>
.sky {
background: #082f49 url("https://picsum.photos/seed/sky/400/120") center / cover;
color: #fff;
padding: 1.2rem;
}
</style>
<div class="sky">Mars year ≈ 687 Earth days</div>Engineering
A logo that does not tile
Default repeat tiles the picture like stamps. no-repeat plus padding-left leaves room for a 48 px mark. That is a status chip, not a wallpaper.
Example
<style>
.mark {
background: #f0fdfa url("https://picsum.photos/seed/chip/48/48") no-repeat 8px center;
padding: 0.7rem 0.7rem 0.7rem 64px;
}
</style>
<p class="mark">logger v1 — ok</p>