Dreamweaver - HTML and CSS Using Dreamweaver

Change background on website

Daniel Walter Scott || VIDEO: 30 of 34

Download Exercise Files

Comments

Overview

I recommend hosting your new website with Bluehost, you can get a big discount by signing up with this link: https://www.bluehost.com/track/byol/byol_dwhacud_30

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.
     
    
  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.
     
     
    
  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.
     
    
  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.
     
     
    
  3. In Dreamweaver choose Code View
  4. Put a couple of returns just above the tag: 
     
    
  5. Paste in our background code.
     
     
    
  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.
     
    
    
     
    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
     
    

    
    
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.




Coming Soon