CSS questine

  • Started
  • Last post
  • 2 Responses
  • Bennn

    I have a background image in a DIV that is supposed to resize with the browser window, its 100% width. On iOS (iPhone, iPad) the background is zoomed in, full size and doesn't resize like the code is asking.

    Here's my CSS :

    background-color: #FFF;
    width: 100%;
    height: 100vh;
    max-width: 100%;
    background-image: url(1277.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin-bottom: -5px;
    display: table;

    HALP ME!


    Background cover and fixed on mobile doesn't work well with mobile, it takes into account whole page instead of only div. make it not fixed on mobile...

  • ETM0

    iOS and bg images have often been a prob. Looks like you have most of the tricks already implemented.

    Maybe try adding -webkit-background-size: 100%;
    and removed the background-attachment: fixed;

    You may be better off just using a media query to show a different image on mobile... on optimized to the format.

    It really is more helpful if you have a fiddle or codepen etc to play around and help you.