Use This Simple CSS Tutorial for Your Lens Background
Have you heard of CSS Backgrounds? Do you have a Squidoo lens or two? How about a website? A MySpace profile? Are you bored by all those plain old white backgrounds? Here I'm going to show you how to spice up your lenses and pages and create beautiful backgrounds using the CSS Background statement (otherwise known as HTML style).
Most lenses use the standard white background but what if you could jazz them up a little bit? There are a few tips out there on adding colored boxes and dashed lines around your text. But you know, you can go further. I'm going to show you how to do something really amazing with your backgrounds.
Don't worry, there's nothing too technical in here. This simple CSS Tutorial shows you all the steps you need. There's even some free examples at the end which you can copy and use for your own lenses (including the images!) Didn't find what you wanted? You can VOTE for other tips at the end.
You know, once you've tried out these backgrounds, there's no going back to plain old white...
Let's Get Started With an Example
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!
This Looks Great. Why Should I Care Though?
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...
How About Something a Little More Space Age?
10 points if you can recognize the background
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.
Fancy Yourself as a Landscape Artist?
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!
OK. You've Convinced Me This Is Great - What Next
Time for the techie bit...
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.
Let's try Something Else
How about using a smaller image and moving it around?
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...
Positioning Smaller Images for Cool Backgrounds
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
Let's Try CSS Background Repeat
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.
How Do I Change My Background Image Size?
I want it to be bigger or smaller
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...
A Few Words on Cascading Style Sheets
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
Is All This Code Making You Nervous?
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
Free Backgrounds for Your Lenses
Just cut and paste the examples below for your own lenses. Enjoy!
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; ">
Looking For Some More Help?
Check out my pick of CSS books on Amazon

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
Learn the Secrets of Style for Your Website
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.
OK - Now It's Your Turn!
What Would You Like To See?
If this was helpful, do let me know what else you'd like to see. You can vote on the list below, or even add your own items...
More CSS Examples for My Squidoo Lenses
These were great so show me more8 points
Some nice images to use as backgrounds
Sky, sea, mountains - what else?2 points
Help with using external style sheets?
If this means nothing to you don't worry2 points
Check Out the Latest Posts on CSS Backgrounds
From Google Blog Search
There are browser support issues, image ideas, tips for tiling. Check it out...
- css tutorial, css templates, css background, css border, css ...
- CSS and it's not broken down into ?sections.? It's easy to do an it makes working with code weeks, months, or years later much easier. You'll have an easier time finding classes and elements that you need to change. ...
- » 5 tips and tools to optimize your php application - Part 1 ...
- Resources: http://code.google.com/p/minify/; CSS Background Images are bad - usually Using a div for all of your images with a background image is not that great for performance as it requires more calls. I'll be the first to admit it's ...
- CSS Background Transparency | Fresh Blurbs
- The Right Way is obviously CSS 3.0: rgba(R,G,B,ALPHA), but since only Safari supports CSS 3.0 currently (to the best of my knowledge, but you bet IE does not) the "right way" is out of question. Moving on. You can, also, try using the ...
- themorgue.org » Simple Variable-Width Buttons with Backgrounds in CSS
- The CSS code below will put our button image behind the tag as well as set the height of the element to the same height as the background image and set the appropriate font size. #dialog a span { background: transparent ...
Show Off Your Stunning Lens Backgrounds
You can do it too
Just to show how easy it is to add these backgrounds, I'm building a list of other Squidpeople who've used them in their lenses.
You can even add and vote for your favorites!
#1
LENSMASTER OF THE DAY Volume 1
Let this lens be the repository for all the awarde more...2 points
#2
COCONUT - The Tree of Life
The coconut tree plays an important part in every more...2 points
#3
The Death of Poetry
Have you ever tried asking a teen or perhaps a kid more...2 points
#4
Stress Reduction Simplified
What can you do when you're too stressed to de-str more...2 points
#5
WHO? SquidAngels!
Get to know the SquidAngels! We are a small group more...1 point
#6
Photo Phight on Squirrels
Some people don't like squirrels, but I think they more...1 point
#7
Photo Phight
This lens will get you started with what you need more...1 point
#8
Lyrics Headquarters Headquarters
Lyrics GroupThis Group is only for lenses with lyr more...1 point
#9
Are Clotheslines an Eyesore or an Energy Saver?
Clotheslines are gaining in popularity Hanging you more...0 points
#10
Krypto the Superdog
My children and I love watching Krypto the Superdo more...0 points
Leave Me a Comment
It's great to get feedback
Tracey_M wrote...
This is something I've never thought of doing. Nice lens. Thank you.
anthropos wrote...
Every lens I do, I try to improve it over the last one and add something I have never used before. This looks like something to try on my next lens. I have signed up for your guide.
allsewnupfabrics wrote...
Excellent information, explained in plain clear language. Thank you.
EditionH wrote...
Hi Doc this lens has been of great help,especially when someone is as lazy as me ! (books standing on the shelf collecting dust).
...
EditionH wrote...
Hi Doc this lens has been of great help,especially when someone is as lazy as me ! (books standing on the shelf collecting dust).
...

