Images in CSS
Did you know CSS can create images without using a single file?
nanadwumor
-
CSS uses URLs to display images.
-
image-set() serves images by device quality.
-
Gradients generate images with colors only.
-
Useful for backgrounds, designs, and responsiveness.
RECOMMENDED ARTICLES
identifiers in CSS
The secret power of CSS identifiers, the tiny names that give you full control over your styles! Identifiers are custom CSS names you create. CSS treats similar names with different cases as unique. Used in list counters like...
inherit, initial, unset in CSS
Tiny CSS keywords can reset, copy, or undo styles with just one word. Keywords control styles without numbers inherit copies, initial resets, unset smart reset all applies to most properties, safer to limit revert returns to browser/user defaults...
Images
You can use images in many different ways: as backgrounds, as decorative elements, or even as patterns. When CSS sees an image value (written as <image> in the specs), it knows you’re pointing to something visual.
At the simplest level, an <image> is just a URL that points to a picture file. But CSS can do much more than that. Modern browsers allow you to use different types of image values, each with its own purpose.
1. URL Images
This is the most common type: you simply give CSS the address of an image.
Think of it like pasting a photo’s link into a message—you’re telling the browser “go fetch this file and display it here.”
Example:
|
1 2 3 |
body { background-image: url("images/coffee.jpg"); } |
Here, coffee.jpg is stored in a folder called images, and CSS uses it as the page background.
2. Image Sets
Sometimes you want the browser to choose the best version of an image depending on the device. For example:
A small, lightweight image for mobile phones.
A high-resolution image for big desktop screens. That’s what image-set() does. It’s like giving the browser a menu of image options and letting it pick the one that makes sense.
Example:
|
1 2 3 4 5 6 |
div.hero { background-image: image-set( url("images/banner-small.jpg") 1x, url("images/banner-large.jpg") 2x ); } |
In this case:
Phones with standard screens will download banner-small.jpg.
High-resolution screens (like Retina displays) will grab banner-large.jpg for sharper quality.
It’s very similar to HTML’s srcset attribute for <img>.
3. Gradients
Here’s where CSS gets creative: you can make images without using image files at all!
A gradient is a smooth transition between two or more colors. CSS can generate these automatically, so you don’t even need a .jpg or .png.
Think of it like mixing paint on a canvas:
Linear gradients fade colors in a straight line (top-to-bottom, left-to-right, etc.).
Radial gradients spread colors outward in a circular or oval pattern.
Example:
|
1 2 3 |
button { background-image: linear-gradient(to right, orange, red); } |
This creates a button with a warm orange-to-red fade.
Recent Comments