Create Stunning CSS Backgrounds with Images

Let's start with something relaxing. Here's an example of a beautiful blue sky background.

As you can see, there's a blue sky image behind this text. I can change the text whenever I want without having to edit the image itself.

I've also chosen white as the text color since it looks good against the blue background.

The text is looking a little crowded against the edges of the image though so let's add some padding all around the side.

That's better! I've just added a simple 15px padding around all of the text. This just means that there are 15 pixels between the edges of this text and the edges of the image.

What's a pixel? It's just a 'dot' on your computer screen.

Simple!

Did you know that each of your visitors these days spends an average of 1.5 milliseconds on each of your pages?

That's an exaggeration I know, but you get my point. We all have reduced attention windows and this is especially true on the web.

If you can add some fancy style to your web pages or your Squidoo lenses then you can attract your visitors' attention, and also keep it.

This is a good thing.

The other reason is that many web designers these days are using CSS backgrounds to craft beautiful web layouts. Even if you don't care about other web sites, it's worth knowing this.

The other reason is that its better than putting text inside an image. Why? Because the text appears properly in your web page and gets found by search engines. This is good for SEO.

The other reason is that if you learn to use some of these style features here in Squidoo then you will also be able to apply them to your own web pages. You can even go a step further and put the style statements into a separate Style Sheet. We'll look at why this is good later on...

Here's a good example of a pretty complex background which gets in the way of the content.

The geometric structure and colors interfere with the text. It's pretty hard to choose a color that stands out enough and which is easy on the eye.

Here I've chosen bold and black.

Hard to read, isn't it?

If you really want to use a certain background and it's getting in the way of your text then you can try to darken or lighten it to improve the contrast:

This looks better! Here the image is darker with white text. It's still a little bold and geometric for the text, but this might suit your style for your lens.

Just use your favorite image editing software (PhotoShop, Paint Shop Pro, Flickr) and look for the 'darken' tool.

Have you ever dreamed of presenting your lens from an exotic location?

How about a beautiful Paris landscape?

If you are going to use photos or pictures of locations then you need to make sure they don't conflict too much with the text.

One option here is to move the text away from the areas of the image where you don't want overlap. As you can see the Eiffel Tower is getting in the way here.

So I've just added some padding on the left of the text: 120px should do it.

Remember, the image is just a background and the real focus of your writing should be the text!

I promised this wouldn't be too technical but I know you're going to ask me how to write the code.

So here goes. It's time to roll up your sleeves...

Here's the basic anatomy of the code for including an image:

<p style="background: url(http://www.infinite42.com/css-background-blue.jpg); ">Write the text for your module here</p>

(P.S. This image path won't work for you. It's just an example.....)

Confused yet? Let's break it down.

Your image is inserted as the background to a paragraph of text. A paragraph is the text that you write between the two 'p' tags.

The paragraph opens with <p> and ends with </p> If you just put these around a normal block of text you'll end up with a plain old paragraph.

To spice things up and insert an image you add extra style information into the first <p>

So, it becomes:

<p style="">

... with your style info in between the quotes. See the difference?

So in the above example the style info sets the background to be an image, like this:

background url(address of your image)

Just put the address of your image between the () brackets.

You'll need an image available online somewhere. You can save it on your own server or even save it on Flickr and pull it in from there.

And that's all there is to it!

"Tip: try out your code in a text editor before Squidoo"

I'd recommend playing about with this in a text editor before launching Squidoo. I find this a little bit easier, since you can see the long lines of code more easily. Save your work as a .html file and then you can check your work on your favorite browser.

Remember to make sure you have all the brackets, semicolons and spaces as shown in the example. This is the most common source of problems.

It's also useful to make sure you have the right address for your image. Just copy the image address and paste it into your browser address bar. Your browser should show you the image. If not then you've either typed the address wrong, or you didn't load the image to the right place on your server.

How about this?

You can position an image anywhere you like on the page. The text stays in the same place but the image can move around.

Here we've just added an offset of 40px from the left and 40px down from the top.

We've even drawn a gray box around the paragraph so you can see the edges.

Let's slide the orange across to the right a bit...

Here we've just changed the offset a little bit - it's now 80px from the left.

You can see how you can precisely control the position of the background image.

OK so the orange isn't very subtle here. It's not meant to be. Why would you want to place an image in the middle of your text like this?

On to the next example...

Let's put a nice mountain image at the bottom of our text.

We can use the position control to place it right down at the bottom.

This time we have a zero offset from the left...

...and 160px from the top.

There's also a black border around the edge to show you where the area stops.

This image doesn't work well as a background on its own though because it jumps from white to blue along a straight line - too much for your viewers.

How do we fix this?

.

Let's use the same picture at the bottom but set the background to a fixed color to match the blue sky...

Better?

Here we've just set a default background blue color.

The blue is chosen to match the blue sky of the picture. If you look carefully you might be able to see the join!

We've also changed the font to bold so that it stands out a little better over the background image.

So why not just use an image which includes enough blue sky?

Well, firstly, you might not have access to an image of the right proportions. Second, by using a smaller image at the bottom you get a smaller file size and a page that loads faster on your browser!!

.

Here's the code to place the mountain image at the bottom of the above paragraph:

<p style="background: url(http://www.infinite42.com/css-background-mountain.jpg) no-repeat 0px 180px; color: black; padding: 15px; border: 1px solid black; ">

Notice there are some new terms in the style statement here (between the quotes):

no-repeat stops the image being repeated across the screen

0px and 180px set a left offset of 0 and a top offset of 180px. To position the orange picture in the previous example we used 40px 40px

color: black sets the text color to black

padding: 15px sets the padding around the text to 15px

border: 1px solid black adds the 1 pixel wide black border around the paragraph

What happens if your image is small and you remove the no-repeat? Try this...

With the no-repeat setting taken off my orange picture gets repeated over the text just like this.

Here we're using the css background repeat capability. This looks pretty psychedelic for an orange on a blue background. The contrasting colors conflict with the text and make it difficult to read.

Even after changing to bold text and lightening the orange picture it's still pretty hard on the eye

Notice how the image gets repeated both across the page and also down the page.

Why would you bother to do something like this?

You can choose a background image that can be repeated in an easier way. Maybe some nice textures with a more subtle color scheme would work. This allows you to create repeating background textures using a small basic image.

To make the image repeat across and down the page like this just drop the no-repeat from the background statement.

It's also fun to work with a 'stripe' and then repeat it.

Here on the left is an example of a vertical stripe of green, chopped out of an image which I had lying around.

It's very thin but also tall and contains an interesting color texture. It's hard to see it on such a small slice though.

Here it is not repeated so you only see the one stripe.

What happens if we repeat it?

Here we've made the stripe repeat across the screen.

As you can see it produces some interesting color textures.

Why not let your artistic side take over? Try some slices from different images and see how they look.

It's fascinating to see how they change when repeated across a screen like this.

It's best to go for very narrow slices. 1 pixel wide is best otherwise you might be able to see the slices.

Of course you can do the same with a horizontal slice, but I'll leave that to your imagination.

The code to make the stripe repeat across the screen is easy - just drop the no-repeat and replace it with repeat-x.

repeat-y does the same for vertical repitition.

You might want to adjust the size of your background image. This might be to make sure you can cover your entire background with a single picture, or maybe to adjust the size of your 'tiles' as they repeat across the page.

Right now with standard CSS (actually version 2.0) there isn't a way to specify your background image size. CSS3 will include this, but this isn't supported by many browsers yet.

So how do you do it? Simple! Just use your favorite image editor (PhotoShop, Flickr, etc) to change the size of the actual image. This may not seem very clever, but it works...

You know, if you can get your head around these style statements then you will also be able to use them in your own website to create beautiful backgrounds.

On your site you can take things a stage further and put all your style in a separate Style Sheet.

Why is this good?

Well, you may notice that each paragraph that you want to modify here in your Squidoo lens requires its own style statement. This can get a little bit repetitive if you have many paragraphs to change.

On your own site if you have multiple paragraphs which share the same style, you can put one style statement into your seperate style sheet. The style applies to all of your paragraphs, so you only need to write it once.

This is good. Not only does it save you work, but it makes your pages smaller, so they load faster too.

Most simple websites have one style sheet which is used by all pages on the site. If you want to have different pages with different styles then you can also have multiple style sheets. The style sheets work together in a 'cascade' - this is where the term Cascading Style Sheets comes from. You may have heard of these as they are mostly referred to as CSS

It's understandable. Try the code out in a text editor before you load it into Squidoo. The good news here is that you can play with it without breaking anything!!

Watch out for all those quotes, spaces and semicolons.

If you have problems check the code carefully and make sure you haven't missed anything.

Remember, most geeky code like this uses pairs of elements:

Tags are enclosed with a < and >

Most tags have a beginning and an end, such as <p> and </p>

Quotes always "open and close"

Many statements end in a semicolon, but not all

Here's an example of a simple grass background.

You could use this for a 'green' lens, or maybe something about lawn products...

This is a pretty dark shade of green so works well with white text

The background is actually a 300x300 image, edited so that it tiles across and down the screen without any obvious joins.

It's good to use a smaller image and then tile it because this reduces the size of your lenses. I'm sure the Squidservers will appreciate this, and so will your readers!

The image is already uploaded to photobucket.com so you can use it whenever you like.

Here's the code for the simple grass background:

<p style="background: url(http://i339.photobucket.com/albums/n448/DrRichard42/CSS-
Background/css-background-grass.jpg); color: white; padding: 15px; ">

There's no line break in the middle of the image URL - it's just there to make it fit the page!

Here's a lighter version of the grass background.

This time it looks good with black text - if you make it bold it looks even better!

.

Here's the code...

<p style="background: url(http://i339.photobucket.com/albums/n448/DrRichard42/CSS-
Background/css-background-grass-light.jpg); color: black; padding: 15px; ">

Finally here's a finer version of the picture.

The image has been reduced in size which makes the features smaller - this might look better for certain backgrounds.

The image is now 150x150, but you won't see this because it's still tiled across the screen.

.

Here's the code...

<p style="background: url(http://i339.photobucket.com/albums/n448/DrRichard42/CSS-
Background/css-background-grass-fine.jpg); color: black; padding: 15px; ">

You can Contact Me via my Squidoo lensmaster page if you have a question about CSS backgrounds for your lens, or any other CSS question.

Or, you can do this direct on my website at www.infinite42.com. I look forward to hearing from you!

The Zen of CSS Design: Visual Enlightenment for the Web (Voices That Matter)

$29.69 (7/29/08)

This is a great book for inspiration on CSS Design, but probably not for beginners. It contains wonderful examples with amazing pictures of the kinds of layouts that you can achieve with CSS code. The main theme of the book is the use of CSS standards to create beautiful, progressive websites. It is based on the famous CSS Zen Garden web site



Head First HTML with CSS & XHTML

$26.39 (7/30/08)

Head First HTML is a great starter guide which covers both HTML and CSS. It takes you through the process of creating a web pages with simple examples of building content and setting the style using CSS. The book shows you how to use the latest standards and combine them with seperate style sheets to create modern, maintainable web pages



CSS: The Missing Manual

$23.09 (7/30/08)

This book provides a more detailed insight into CSS but keeps the content light and accessible. There are some excellent explanations of CSS technology and very useful examples. The book takes you through the full range of CSS capabilities from simple page layout to more complex effects such as photo galleries and drop shadows

Do you own a website? Are you planning to build one? You can apply these style ideas to your own site and make a real difference. You'll find more fantastic ideas on website style and content in my guide Squeeze More Results From Your Website. It's free, and just a click away.

Once you've signed up I'll send you the guide and will also check in often to send you more tips and advice and to see how your web design is doing.