Monthly Archives: June 2011

CSS gradients and background images

Let’s say you have a web page with a solid pale blue background color with a background image positioned on top of it.

body { background: #a5c9e5 url(img.png) no-repeat 50% 300px; }

And this is the result:

See example 1 HTML.

Then you heard about CSS3 gradients and thought, “Wow! Now instead of a solid pale blue in the background, I can have a dark blue to pale blue fade!”

With this line of thinking, one may think that taking the ‘background-color’ value part of the shorthand above (‘#a5c9e5’), and replacing it with a ‘linear-gradient’ property would do the trick:

body { background: linear-gradient(top, #1e5799 0%,#a5c9e5 100%) url(img.png) no-repeat 50% 300px; }

But that’s not how it works. Despite the fact that you can define them using hexadecimal, rgb, or rgba, CSS background gradients are not like background colors, but instead are like background images.

So to get effect we described above on the same element, our browser would need to support multiple backgrounds, and we’d need to declare it like so.

body {
		linear-gradient(top, #1e5799 0%,#a5c9e5 100%),
		url(img.png) no-repeat 50% 300px;

(Note: For the sake of simplicity, this example CSS is simplified without all the additional declarations that use vendor prefixes.)

But when testing that out, we only see the gradient.

See example 2 HTML

Where’s the background image? It’s there, but under the gradient. The order in which the background images are specified matters. If we rearrange the properties so that the image is first and the gradient is second:

body {
		url(img.png) no-repeat 50% 300px,
		linear-gradient(top, #1e5799 0%,#a5c9e5 100%);

The image will show up as desired – on top of the gradient.

See example 3 HTML.

Think of CSS gradients not as a color, but as images. The guidelines for combining multiple background images apply to CSS gradients, too.


Source of train picture.

Nudging elements with position: relative

I find that most people are familiar with using position: relative; on a containing element so that its descendent can be absolutely positioned relative to that element. So to get this effect:

The positioning rules would look something like this:

.container {
	position: relative;
.container div {
	position: absolute;
	top: 20px;
	right: 20px;

Relative positioning is also helpful for positioning the targeted element relative to its expected position in normal flow.

Let’s say I have an image in my document:

<p>This is a paragraph</p>
<img src="img.png" alt="A man on a bycicle" />
<p>This is a paragraph</p>

By default, the markup above looks like this (see example 1 html):

But I’d like it to be pulled out a little for a magazine-like look. I’ll start by adding float:left; to the image so that my text can wrap around the image.

.container img { float: left; }

That will get me this (or see example 2 html):

But I want to pull the image off to the left so part of it is visually extending outside the article. I’ll specify 100 pixels to the left, but first I have to specify position:relative;.

.container img {
	float: left;

Resulting in this (or see example 3 html):

Hmmm… but the text is continuing to wrap around the image as if it’s still in its original spot.

That’s relative positioning — the element can be visually offset from its position in the normal flow, but the browser reserves that element’s original space. In order to have our text flow around the image’s new position, we can use negative margins. Since I don’t want the text butting up against my image, I’ll just use 80 pixels instead of 100 pixels, which allows a 20 pixel gutter between the image and text.

.container img {
	float: left;
	margin-right: -80px;

Resulting in our desired result (or see example 4 html):

Relative positioning is helpful for not just setting a context for the absolutely positioned elements within them, but can also allow more flexible positioning opportunities. Though this article only covered an example for pulling items left or right, the concept can also be applied to vertical offsets (top and bottom). In conjunction with negative margins, relative positioning can help some designs ‘break out of the box’ allowing elements to extend outside their normal containers.