Add a Background Color in Dreamweaver

In Adobe Dreamweaver, it’s easy to add a background color to your HTML page using CSS format.

Once you’ve opened up your new HTML page, be sure to add the <style> tags. You will be adding information between the style element. In this instance, we are adding a background (property) color (value) to the body (selector) of the page.

Add the “body” selector followed by “{“. Press enter and you will be prompted to choose from multiple properties. Dreamweaver makes this process easy by giving a dropdown menu of many possible properties you may want to add.


You will then be prompted to choose a color.


You can use the eyedropper to choose a color, or enter a HEX Value (#FF0000 for example) or RGB value (rgb(255,0,0) for example).


In this case, the eyedropper was used to enter the value for the color. Don’t forget to add a closing bracket (“}”) after the background color value.


Add any other information for the body of your website between the <body> element.


Save the file, and on the right-hand side of Dreamweaver, you will see a preview of your site.


Now you have a background color that will be present throughout your entire page!

– brooke marine


~ by brooke marine on September 21, 2013.

3 Responses to “Add a Background Color in Dreamweaver”

  1. I love the style of this post. It’s well organized, succinct and easy to follow. Providing images with every comment is extremely beneficial and the accompanying screen shots, as opposed to plain text, allow me to see how / where the code should actually live within my webpage. I appreciate how large the images are and how simply your directions can be followed.

  2. Your post is very helpful as this is something that I was tackling this week with my own website. Your explanation was very comprehensive and I liked that each step was illustrated with pictures. It was very easy to follow along with your post and I’m glad that you included both the code and the finished product of the website formed by the code. It was nice to see the outcome of your work!

  3. I thought this post was stylistically the most impressive. At every step there was a photograph that allowed the reader to feel as if he were using photoshop itself. In between photographs there was maybe one or two lines of text, which made it easy to read and follow. If there had been too much text this would have made the steps feel disjointed dissonant.

Comments are closed.

%d bloggers like this: