In this third part of our CSS guide, we look at how to add images and backgrounds.
In the previous part of our guide, we discussed stylizing headings and paragraphs. While this is a good start, one thought that might cross your mind is whether or not you can change the background. After all, it’s stuck in plain white. What if we want to change that? That’s actually an easy thing to do.
Additionally, we also look at how to add some simple styling to our images.
Images
A great way to add some flair to our site is to throw in some pictures. While it’s easy enough to throw in some HTML, CSS can help immensely to make that picture fit more nicely on our site.
You can use any image you like while you follow along. I simply elected to use our logo more for illustrative purposes.
Let’s start off with some basic code largely carried over from the last part of our guide. I’ve got the following:
The resulting page looks like this for me:
It has some interesting idea’s. I mean, the image is placed below a centred heading. Unfortunately, the text just starts below the picture. As a result, there is a lot of wasted screen real-estate. Wouldn’t it be nice if, say, the text wraps around the image? If you want to accomplish this, there is a simple CSS rule you can use: float.
To keep the picture on the left hand side and have the text wrap around it, we’ll need to get the image to float left. So, for that, I add this code to the CSS file I have:
We’re modifying the img tag. The rule is float: left;. Now, let’s save our CSS file and look at what the results wound up being:
Wow, what a difference a single CSS rule can make! Note that you can also use “float: right;” to move the image to the right as well. In the event you want an image to appear in the middle of the text (like, for instance, using emoticons), you can use the “float: both;” rule.
Now, you might wonder if there is a way to control the space between the picture and the text. In fact, there is. If you remember back in our previous section, you might recall that we used margins to affect the spacing between paragraphs. Conveniently, we can also use margins. Since we are only ever going to really concern ourselves with two sides (in the case of an image floating to the left, the right and bottom – though bottom is unlikely as text will likely take care of adding some space at the bottom anyway), we can modify those specific sides accordingly.
In the above code, I added “margin-right: 5px;”. This tells browsers I want to have 5 pixels separating the picture from anything else on the right hand side of the image. The result:
That works pretty well. We can, of course, continue to modify the margin and hone in on what exactly we want. (Note that I did adjust the line height to my paragraphs to make it a little easier to see the margin).
There is a whole lot more one can do with images, however, that’s the main uses for them. There’s a lot you can do with the pictures before they hit the web which would likely save on processing power for all parties involved.
Backgrounds
If you’ve been itching to axe the white background, this is definitely the section for you!
There are a number of elements we can add a background to, but for our purposes, the easiest way to add it is to modify the body tag. Yes, we can modify the rules of those basic tags as well. Adding a background to the body tag will make it apply to the entire page.
One easy way to change the background is to modify the colour. To do this, I’m going to use “background-color: #9999FF;” like so:
The results I got:
Behold! The white background is gone!
Before I go any further, there is one thing I should stress: when you are picking a background colour, keep an eye on your text. Is your text visible? It’s important to have a good degree of contrast. So, for instance, a white background and a very light grey text makes the text barely legible – if legible at all. Likewise, a dark grey font and a black background is also probably not going to work.
Another thing worth pointing out is that not everyone viewing your site is going to have perfect vision. Some visual impairments involve difficulty distinguishing certain colours. So, when you are designing your site, that is something you should probably consider before going wild in the colour department.
Also, be wary of colour contrasts that cause colour “vibration”. For a list of colours that can potentially vibrate, you can check out this site.
So, some definitely good things to keep in mind when picking your colours. The best possible contrast in colours? Black and white. Yes, all this time, we’ve been using the ideal colour contrast as boring as it sounds.
Of course, backgrounds aren’t tied solely to colours. We can also add an image to our background as well.
In our CSS, change the CSS to have the rule background-image: url(../images/[your image URL here]);
For me, I have the following code:
One thing to note: if the image doesn’t load, delete the two periods before the path. Chances are, though, you’ll need those periods though.
An additional note is that if you are uploading these files directly onto a server, you can simply paste the image file path instead. This example simply shows what you can do to make an offline copy work.
The result is this:
The text is obviously very hard to read and it would be tricky to get a font that works in this circumstance. Ideally, we’ll want to create a separate box to make it easier to read, but this will be for a later part of the guide. The point is that we are able to give a background image to our page.
While this wallpaper may or may not work, one question one may have is if there is a way to control how this image repeats. The answer is a definite yes!
Let’s say we want to make it repeat only once horizontally. For that, we’ll need to add a repeat rule to our CSS within the body tag. In this case, I’m going to add background-repeat: repeat-x; like so:
The end result for me is this:
If you want to repeat it vertically, simply change repeat-x to repeat-y. If you don’t want it to repeat, simply use no-repeat in place of the repeat-x.
Naturally, the next question is, can we affect the position of the image in question while repeating it? Once again, the answer is a definite yes!
Let’s try repeating the image vertically and get it to repeat it on the right hand side. First, we want to use the repeat-y function mentioned earlier.
Next, we want to add a new rule that is as follows: background-position: right top;. The end result should look something like this in your CSS code:
The end result for me is this:
The logo obviously isn’t a great example of what image you can use, however, the effect is obvious. For those who have a general design background, the gears are likely turning already for what kind of image you can use for these backgrounds no doubt. A simple texture can easily do. Additionally, you can always combine those images with background colours at the same time. This, of course, opens up a host of possibilities already.
That’s it! Congratulations! You now know how to do some basic styling of images and styling backgrounds!
< Headings and Paragraphs | CSS Index | Links >