How to Add a Background Image to Your Web Page

I used to set my background images with HTML. I realize that this way is deprecated – meaning that it is no longer a part of the HTML standard. But, since you may still see it done this way in old web pages, I want to include it here:

<body background="photo.jpg">

This may still work in some browsers. Most browsers still translate the deprecated code pretty well since there are so many old web pages with the deprecated code still in them. But, since this code is deprecated, browsers don’t HAVE to support it and will probably phase it out with new releases. So, it’s best if we do it the more proper way.

I have been reluctant to learn CSS only because it’s been somewhat of a bigger learning curve for me since I’m not a visual person. I much prefer to spend my time in the programming side of things. But, the more I use CSS, the more I like it. It’s beginning to make more and more sense to me.

Here’s how to set the background of a web page with CSS:

<body style="background: url('photo.jpg')">

This will do the exact same thing as the deprecated HTML code. It takes the photo supplied for the background and repeats it over and over throughout the entire web page.

If you don’t want the image to repeat, try this:

<body style="background: url('photo.jpg') no-repeat">

If you want the image to repeat across the top, try this:

<body style="background: url('photo.jpg') repeat-x">

If you want the image to repeat down the left side of the page, try this:

<body style="background: url('photo.jpg') repeat-y">

If you want the background to be a color instead of using an image, you can do this:

<body style="background: red">

Or this:

<body style="background: #FF2500">

Another point about backgrounds before I leave for today: Don’t just assume that your background will be white if you don’t set your background. It probably will be, but if you don’t set your background, then you are leaving it up to the browser. If you want a white background, to play it safe, set it to white (#FFFFFF).

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top