Buying Make my fullscreen css background work on all browsers including iPad and iPhone!-$10

Discussion in 'Programming' started by thevht, Jul 29, 2012.

0
  1. #1
    Hi there!

    I have a new website that has an awesome background that I need to show up well on mobile devices. I don't have time to keep fiddling with the code to get the background to work and I'm sure someone here already knows how to do it. At present, the css code I'm using works great on
    Chrome (PC and Mac)
    Firefox (PC)
    Safari (Mac)

    but doesn't work on
    IE (PC)
    Firefox (Mac)
    iPhone or iPad

    It is a fullscreen fixed image. To see how it should look, check out booksurvey dot org with one of the browsers above that works.

    A demonstration of the code working on another site with all browsers mentioned gets you $10 without delay via paypal. In case it matters, I do not want a solution that uses JQuery. Otherwise any css +/- javascript solution will suffice.

    PS. Post here when you have something that works so that others don't waste their time. Thanks!
     
    thevht, Jul 29, 2012 IP
  2. .3rok3n

    .3rok3n Well-Known Member

    Messages:
    383
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    135
    Digital Goods:
    1
    As Seller:
    100% - 1
    As Buyer:
    50.0% - 1
    #2
    Hello, sorry for the PM, Working solution is in CSS.

    inside ur css file all you need is change this background-image: url("background.svg");
    to
    background-image: url("background.svg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    Thanks

    Edited please check back the code once again.
     
    .3rok3n, Jul 29, 2012 IP
  3. thevht

    thevht Peon

    Messages:
    49
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #3
    Hi, thanks for helping so quickly.

    I set up your code here:
    booksurvey dot org/index2.php which uses
    booksurvey dot org/booksurveystyles2.css

    and now the background doesn't work in Chrome (PC) let alone iPhone.

    Did I implement it incorrectly?

    Thanks

     
    thevht, Jul 29, 2012 IP
  4. bassam3000

    bassam3000 Member

    Messages:
    263
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    30
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #4
    it works perfect on Chrome PC and IE PC. I also tried iPhone and works perfect
     
    bassam3000, Jul 29, 2012 IP
  5. thevht

    thevht Peon

    Messages:
    49
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #5
    thevht, Jul 30, 2012 IP
  6. .3rok3n

    .3rok3n Well-Known Member

    Messages:
    383
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    135
    Digital Goods:
    1
    As Seller:
    100% - 1
    As Buyer:
    50.0% - 1
    #6
    It worked perfect mate. all you need is to remove that min width and min height

    Thanks let me know if you needed any more help
    Use following code:
    body {
    width:100%;
    font-size:90%;
    background: #ffdc9d url('http://booksurvey.org/background.svg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }
     
    Last edited: Jul 30, 2012
    .3rok3n, Jul 30, 2012 IP
  7. thevht

    thevht Peon

    Messages:
    49
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #7
    Still not working for me. Could you set up a demo of the code working somewhere else?

    booksurvey dot org/index2.php
     
    thevht, Aug 1, 2012 IP