How to Add a Background Image with Dreamweaver

by Hough on July 3, 2012


How to Add a Background Image with Dreamweaver Video Tutorial

Instructions for Adding a background Image with Dreamweaver

You will be working with the CSS Styles panel so if it isn’t already available go to Window > CSS Styles and make sure it is ticked

1. First create a new CSS Rule by clicking on “New CSS Rule” from the CSS styles panel

2. In the New CSS Rule dialogue box select Tag from the selector type drop down box. In the selector name field choose body

3. If you intend to apply an image to the background of every page then I suggest you select “New Style Sheet File” so you can easily set a background for all your webpages. Click OK

4.In the CSS Rule definition dialogue box click on the Background category.

5. For the Background-image field add an image by clicking browse.

6. For the Background-repeat field select no repeat

7.For the Background-attachment select fixed rather than scroll so the image remains fixed when you use the scroll bar to see the rest of the text

8. For Background-position (X) choose center so the image is centered on the page

9. For the Background-position (Y) choose top

10. Next create your white page that will be placed on top of the background. To do this select New CSS rule from the CSS Styles panel again and this time select ID. Give the ID a name. Click OK

11. In the CSS Rule definition Dialogue box for the Type category select a font, a font size and a font color

12. Select the Background category and choose the color of your page

13. Select the Box category and choose a width of the page, padding for the text and a margin around the top, bottom and sides. It is best to set the right and left margins to auto as this will make the page centered

14. In the Border category add a solid border with a width of 1 pixel

15. Click OK

16. Apply the CSS rule by clicking anywhere on the page and selecting “Insert Div tag” from the Insert Bar

17. In the Insert Tag Dialogue box select the name of the Div element from the ID dropdown list and click OK

18. Add some Text to the Div element

Leave a Comment

Previous post:

Next post: