Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
  1. #1
    Junior Member
    Join Date
    Jan 2014
    Posts
    17
    Member #
    38140

    Responsive Background..?

    Here is my HTML code.. can somebody tell me how to fix it so
    that the background image is RESPONSIVE? I am a beginner,
    and I was assuming/praying this would be very simple.. Thanks!!!!


    <!DOCTYPE HTML>
    <img src="website down.jpg" id="bg" alt="">

    <audio autoplay loop>
    <source src="MP3.mp3" />
    <source src="M4A.m4a" />
    <source src="OGG.ogg" />
    <source src="PCM.wav" />
    </audio>
    </body>
    </html>

  2.  

  3. #2
    Member djitsz's Avatar
    Join Date
    Jan 2014
    Posts
    67
    Member #
    38199
    Liked
    17 times
    Your HTML is invalid and has no <html>, <head>, </head> and <body> opening tags before the <img> tag.

    To make the image resize with the browser window, use the background-image CSS property instead of the <img> tag. Also, rename your image file to remove the space ("website-down.jpg" instead of "website down.jpg") to avoid problems.

    Add the following in the <head> section of your html:
    Code:
    <style type="text/css">
    body {
    background-image: url(website-down.jpg);
    background-size: cover;
    }
    </style>

  4. #3
    Junior Member Hammadsiddiqui's Avatar
    Join Date
    Feb 2014
    Posts
    10
    Member #
    38554
    Liked
    1 times
    The background images become responsive with the background-size property with value 'cover'.

    .bg
    {
    Backround-size: cover;
    }

    Sent from Samsung Galaxy S4 GTi9505

  5. #4
    Junior Member
    Join Date
    Jan 2014
    Posts
    17
    Member #
    38140
    Hey, much thanks for the reply!!

    so.. I tried using this:

    <!DOCTYPE HTML>

    <style type="text/css">
    body {
    background-image: url(website-down.jpg);
    background-size: cover;
    }
    </style>

    <audio autoplay loop>
    <source src="MP3.mp3" />
    <source src="M4A.m4a" />
    <source src="OGG.ogg" />
    <source src="PCM.wav" />
    </audio>
    </body>
    </html>



    the results were adequate on my mobile devices, but on my
    desktop, when i would enlarge the browser, things got pretty
    wonky.. do you know what i might be doing wrong?
    I am using the software "TextWrangler."
    I am saving the HTML file with the settings
    Line breaks: Unix (LF)
    Encoding: Unicode (UTF-8) ...
    is this incorrect? Is it possible
    the background image i'm using
    is the wrong dimensions?

    I am quite in the dark about what
    is happening, ha..
    A million thanks for your patience!
    dan

  6. #5
    Junior Member
    Join Date
    Jan 2014
    Posts
    17
    Member #
    38140
    Hey, much thanks for the reply!!

    so.. I tried using this:

    <!DOCTYPE HTML>

    <style type="text/css">
    body {
    background-image: url(website-down.jpg);
    background-size: cover;
    }
    </style>

    <audio autoplay loop>
    <source src="MP3.mp3" />
    <source src="M4A.m4a" />
    <source src="OGG.ogg" />
    <source src="PCM.wav" />
    </audio>
    </body>
    </html>



    the results were adequate on my mobile devices, but on my
    desktop, when i would enlarge the browser, things got pretty
    wonky.. do you know what i might be doing wrong?
    I am using the software "TextWrangler."
    I am saving the HTML file with the settings
    Line breaks: Unix (LF)
    Encoding: Unicode (UTF-8) ...
    is this incorrect? Is it possible
    the background image i'm using
    is the wrong dimensions?

    I am quite in the dark about what
    is happening, ha..
    A million thanks for your patience!
    dan

  7. #6
    Junior Member
    Join Date
    Mar 2014
    Posts
    2
    Member #
    38812
    thanks for searing this, its was a great help for me. thats why i am replaying u...
    thank u so much..

  8. #7
    Senior Member Noteleklabs's Avatar
    Join Date
    Jun 2012
    Location
    NC
    Posts
    217
    Member #
    31890
    Liked
    28 times
    This is still invalid code, the correct code would be:
    HTML Code:
    <!DOCTYPE html>
    <html>
      <head>
       <style type="text/css">
        body {
         background-image: url(website-down.jpg);
         background-size: cover;
        }
       </style>
      </head>
      <body>
       <audio autoplay loop>
        <source src="MP3.mp3" />
        <source src="M4A.m4a" />
        <source src="OGG.ogg" />
        <source src="PCM.wav" /> 
       </audio> 
      </body>
    </html>
    Hey you! Go make something!


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Tags for this Thread

All times are GMT -6. The time now is 12:53 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com