Supersize that Background, Please!

With an advertising world keen to use every inch of a medium for brand or product experience, it is becoming increasingly popular to design websites with full-browser backgrounds. Using CSS, this can be achieved quite easily. Just drop a huge background image in a page with one line of code. But which image size will be big enough? Monitors and operating systems have evolved quickly, and as a result there is a wide range of available screen resolutions.

A better solution would be to scale the image to make it fit within different window sizes. Unfortunately, CSS 2.1 has no means of scaling background images. CSS3 backgrounds to the rescue…

VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)

Multiple Backgrounds and Borders with CSS 2.1

Using CSS 2.1 pseudo-elements to provide up to 3 background canvases, 2 fixed-size presentational images, and multiple complex borders for a single HTML element. This method of progressive enhancement works for all browsers that support CSS 2.1 pseudo-elements and their positioning. No CSS3 support required…

VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)

CSS Backgrounds: 12 Solutions To Common Questions

CSS backgrounds are an important part of web design. The property is where you add the colors and images that sit behind your content, which controls much of the aesthetics of your site. Remove your CSS backgrounds and your site will probably be text on a white background. While relatively easy to understand, CSS backgrounds often lead to some questions and confusion when it comes to pulling off specific techniques. Let’s see if we can clear up some of that confusion and then answer a few of those technique specific questions…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

How to: CSS Large Background

Since I posted the huge collection of Large Background Websites, I received several email requests on how to make a large background site with CSS. So, I thought it would be a good idea to share my techniques on designing large background websites. In this tutorial, I will provide various CSS examples on how you can create a large background site using either a single or double images…

VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)

Style a List with One Pixel

A one-pixel background image can be a pretty versatile thing. With repeat-x it can be a horizontal line, repeat-y makes a vertical line, and repeat makes it a fill color. Just as a little fun proof of concept, we can use that to create a depth-chart looking unordered list…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Backgrounds In CSS: Everything You Need To Know

Backgrounds are a core part of CSS. They are one of the fundamentals that you simply need to know. In this article, we will cover the basics of using CSS backgrounds, including properties such as background-attachment. We’ll show some common tricks that can be done with the background as well as what’s in store for backgrounds in CSS 3 (including four new background properties!)…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

How To Use Multiple CSS Backgrounds

An article showing how you can use multiple divs and therefore multiple background images to create your web designs. Is that the right thing to do? From a web standardista’s point of view, probably not. But the technique is there if you ever need it…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Faux Columns – Equal height columns with CSS

“How do you get the right column’s background color to extend all the way down the page?”

It’s a simple concept. One that many of you may already be familiar with. But for those who aren’t, the following technique can be a handy little trick…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)