Skip to main content
Known Participant
July 25, 2017
Answered

Image background for mobile devices

  • July 25, 2017
  • 2 replies
  • 2690 views

Evening. I have added an image to my website's background via D.W. through the properties page. How do I set it up where it will fit for mobile devices? Phone and tablets? The other items work minus the background image still remains the same. Thanks in advance.

    This topic has been closed for replies.
    Correct answer Nancy OShea

    Background images don't resize to viewport without some help from CSS code.   Assuming your background-image is being applied to the <body> of your document, open your document in code view and add this CSS code to the <head> tag.

    <style>

    body {

         background: url(your_BG_image.jpg) no-repeat center center fixed;

         background-size: cover;

    }

    </style>

    Nancy

    2 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity ExpertCorrect answer
    Community Expert
    July 25, 2017

    Background images don't resize to viewport without some help from CSS code.   Assuming your background-image is being applied to the <body> of your document, open your document in code view and add this CSS code to the <head> tag.

    <style>

    body {

         background: url(your_BG_image.jpg) no-repeat center center fixed;

         background-size: cover;

    }

    </style>

    Nancy

    Nancy O'Shea— Product User & Community Expert
    Legacys7Author
    Known Participant
    August 16, 2017

    Sorry for the late reply. Been busy trying to get things done. Here's the website link that I want it to adjust on smart phones and tablets.

    http://www.ubermichael.com/

    Nancy OShea
    Community Expert
    Community Expert
    August 16, 2017

    First, fix your code errors.

    Showing results for http://www.ubermichael.com/ - Nu Html Checker

    Not sure why you're using tables for any of this.  Tables are not ideal in responsive layouts.

    Nancy O'Shea— Product User & Community Expert
    BenPleysier
    Community Expert
    Community Expert
    July 25, 2017

    Normally you would use media queries to adjust the content for a screen size.

    Please supply a link to your site so that we can see what is going on.

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!