30 - Change background on website


Questions & Comments

No comments

ALL ACCESS: $12 per Month + Cancel anytime   

Video Description

Adding a repeating background image

  1. Find or create a suitable repeating background image, a useful site is 
    http://www.allfreebackgrounds.com
  2. Open our Bird Bath website.
  3. Modify > Page Properties. 
    Dreamweaver page properties
  4. From the Appearance CSS sections choose browse and find the image you want to use as a repeating image. E.g. birdbath4-background-repeat.jpg
  5. Choose Repeat from the Repeat menu. 

    Dreamweaver page properties
  6. Choose Ok

Background image that doesn’t move.

This trick with make any background image remain fixed while you scroll the website.

Note: Your website must be tall enough to scroll. 

  1. Add a background image as shown in a previous exercise.
  2. Choose ‘body’ from the Selectors panel
  3. Change ‘background-attachment' to fixed.
  4. Change ‘background-position' to 50%.
  5. Change ‘background-repeat' to none. 
    Dreamweaver background colour
  6. Preview your document
    Note: When you scroll up and down the background shouldn’t move.

Background at 100%

This technique will allow you to add a background image to your work that is stretched to cover the entire browser. It is supported by all new browsers. Some older browsers (like IE 8) need all little bit of extra code to make it work.

Note: This exercise is best added at the beginning of a website build. It can be added to an existing site but there can be a few layout problems you’ll have to adjust to make it work. In my experience I’ve found that it causes less problems adding this CSS to each page rather than the external CSS sheet. 

Note: You’ll need a large image. Current full screen image size standard is 1600x1200. You can use something like Photoshop to create the right size. 

  1. Open: Dreamweaver Exercise Files > Text > Background CSS Code.docx
  2. Select all the code and copy it. 

    100% background code in Dreamweaver
  3. In Dreamweaver choose Code View
  4. Put a couple of returns just above the tag:  
    100% background image code
  5. Paste in our background code. 

    100% background image code 2
  6. Change the x3 file names to the name of our background image. 
    e.g. background-full.jpg


    Note: In design view you will not see the background. You’ll have to preview the document to see the results. 
  7. File > Preview in browser > Chrome
  8. Done. 
    Full screen background

    Background inside divs 

A div tag is able to have its own background image. This will let you put an image into a box and allow you to put text of the top.

  1. Choose the div in your selector panel. We'll use #text for this exercise. 
    Note: In this tutorial we're making the div 549px x 350px to match the image.
  2. Find the background-image in the properties panel.
  3. Next to url choose browse.
  4. Find the image Dreamweaver Exercise Files > Sample Images > background-div.jpg
    Div background in Dreamweaver CC

    Div background in Dreamweaver

Note: Your image should either be the exact size of the div or your image needs to be able to be repeated. A repeatable image is good as the div can expand and contract and the image will fill the space. To repeat your background image you use the 'background-repeat' function.

Background Div repeat

ALL ACCESS: $12 per Month + Cancel anytime