How to Center and Resize a Background Image With Dreamweaver

by: JC

I did a previous tutorial on how to center a background image using Dreamweaver, but that tutorial did not show you how to resize the image with the browser.

In this video tutorial, I show you how to center a background image using Dreamweaver and have that video resize with the browser.

This is the code you need to copy and paste:

html {
background: url(images/bg_oap.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Be sure to put your image link in place of the image I have in the sample code.

Internet Marketing Simplified


3 Comments

  1. Nancy
    Nancy02-21-2012

    I subscribed to your awesome youtube videos. They are so clear, concise and easy to understand. How do you get the div that is in the center of the page to automatically resize as well?

    Reply
    • JC
      JC02-22-2012

      Hmmmm, good question. My guess is that you can either use % settings or javascript but honestly, I just don’t know. Never had a need for that function. Thanks for the kind words. ; )

      Reply
  2. tom
    tom03-15-2012

    great video…very easy to follow…..just a couple of questions…..
    1) i noticed some comments on the youtube site that this does not work for IE….is there a workaround for it?
    2) in dw i am not seeing my background image in design or split mode…..i noticed on the video your image was visible…..what am i doing wrong?
    thanks again for the great videos…..

    Reply

Leave a Reply