Making Your Favorite Image a Usable Background

Have you ever had an image you love but if it were the background of your webpage it would make everything impossible to read? Well, this is an easy fix! You can add a content div using CSS to create a solid background that makes your image look like a border in just a few simple steps.

First, you’ll need to set the image as the background in Dreamweaver in a CSS document in the body tab by using the following code and inserting the file name of your image where it says “pic/trydis.jpg” Setting the image as ‘fixed’ makes the image not move around on the internet.

This makes the image the background, seen below, but it is difficult to read. So, let’s fix it!

In the CSS document in dreamwever, create a content section by coding the following. Enter the desired color in the color hashtag.

This creates a content section that is a desired background color over the image. This effect makes the image almost look like a border which adds spice to your webpage and allows viewers to easily read the content!

Alyssa Ferguson


~ by alyssalef on November 6, 2011.

%d bloggers like this: