Archive | background-image

RSS feed for this section

CSS Basics: Using Fallback Colors

Something you very much want to avoid in web design is unreadable text. That can happen when the background color of an element is too close or exactly the color of the text. For instance:

.header {
background-color: white;
color: white;
}

Which could lead to text that’s there, but invisible.

This is … very bad.

You’d never do that on purpose of course! The trouble is it can sneak up on you. For one thing, the default background-color


CSS Basics: Using Fallback Colors is a post from CSS-Tricks

CSS Basics: Using Multiple Backgrounds

With CSS, you can control the background of elements. You can set a background-color to fill it with a solid color, a background-image to fill it with (you guessed it) an image, or even both:

body {
background-color: red;
background-image: url(pattern.png);
}

Here’s an example where I’m using an SVG image file as the background, embedded right in the CSS as a data URL.

See the Pen background color and image together by Chris Coyier (@chriscoyier) on …


CSS Basics: Using Multiple Backgrounds is a post from CSS-Tricks

Focusing a `background-image` on a Precise Location with Percentages

Let’s say you have an element with a background-image, where only part of the image is visible, because the image is bigger than the element itself. The rest is cropped away, outside the element.

Now you want to move that background-image such that you’re focusing the center of the element on a specific point in it. You also want to do that with percentage values rather than pixels. We’re going to have to get clever.

This is going to…


Focusing a `background-image` on a Precise Location with Percentages is a post from CSS-Tricks