www.webdeveloper.com
Results 1 to 2 of 2

Thread: Background image not fluid on mobile

  1. #1
    Join Date
    Mar 2006
    Posts
    58

    Background image not fluid on mobile

    I am trying to make my #header background image fluid so it looks nice on any mobile devices. I am using this simulator to test my site http://transmog.net/iphone-simulator...tsunoindex.me/ the background image doesn't show the correct aspect ratio in chrome but in firefox it works fine. I don't really know if it looks fine on a real iphone. Can anyone help me fix the background?

    Code:
    background-image: url(images/header.jpg);
    background-repeat:no-repeat;
    background-position:top;
    background-size: 100%;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    width: 100%;

  2. #2
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,456
    Hi there Ruriko,

    this code...
    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>backround-image test</title>
    
    <style>
    body{
        background-color:#000;
        background-image:url(http://toarumajutsunoindex.me/wp-content/themes/toaru/images/header.jpg);
        background-repeat:no-repeat;
        background-size:100%;
     }
    </style>
    
    </head>
    <body>
    
    </body>
    </html>
    ...worked perfectly in my test browsers - IE10, Firefox 22.0, Opera 12.16 and Chrome 28.0.

    I can see no reason why it shouldn't also work on mobile devices.

    coothead

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles