0

I have a responsive website but my background doesn't shows properly with phone (iphone6) i haven't tried with other phones. My background just zooming in my phone and looks terrible wanna make it responsive to fit on mobile screen.My website is www.orangegsm.hu I tried in css with :cover code that's the code what i'm using right now:

#background
{
    background-attachment: fixed;
    background-image: url("../img/bg1.jpg");
    background-position: left top;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100%;
    min-width: 100%;
    position: fixed;
    width: 100%;
    z-index: -2;
}

Thanks!

DaniP
  • 37,813
  • 8
  • 65
  • 74
Tibor Ambrus
  • 37
  • 6
  • Did you search for a solution first? Look at http://stackoverflow.com/questions/12609110/responsive-css-background-images – StudioTime Jun 22 '16 at 14:15
  • yes i tried everything with media query and etc. – Tibor Ambrus Jun 22 '16 at 14:18
  • iOS stretches fixed backgrounds to the body size, not the viewport, so you get this issue. I avoid fixed backgrounds on iOS for this reason. – somethinghere Jun 22 '16 at 14:21
  • Then what can i do to make it work? – Tibor Ambrus Jun 22 '16 at 14:22
  • Have a look at [this fiddle](https://jsfiddle.net/vjwj43hf/1/), it may work for you aswell @TiborAmbrus – node_modules Jun 22 '16 at 14:24
  • doesn't work with that as well – Tibor Ambrus Jun 22 '16 at 14:30
  • This one is tricky on iOS, and I have always classified this as the wrong behaviour, but for now there seems little you can do. It's a choice between `fixed` and `cover`, or building a difficult construct around things to make them work with something like JS (which is jittery on safari - all versions - and just not really good for changing it in the future). I think that you might want to consider admitting to one drawback on iOS... – somethinghere Jun 22 '16 at 14:40
  • well then as a solution then, how can i do if someone is on phone doesn't load the background picture/make it like black, but if someone is on a computer then load the background picture? @somethinghere – Tibor Ambrus Jun 22 '16 at 14:47
  • I would either target the browser using its user agent (but that can get boo-ed out of the room here and for good reasons) or I simply turn the background attachment to `static` for mobile browsers. So in CSS, you could give the element a black background and simply unset the background image if you detect you are on a mobile using media queries. Basically something like: `@media all and (max-width:450px){ myelement { background: #000; }}` will turn your background black on smaller devices. – somethinghere Jun 22 '16 at 14:50
  • i don't know how, i don't know why but changing background-attachment from cover, to scroll solved my problem... @somethinghere – Tibor Ambrus Jun 22 '16 at 14:53
  • Yeah, same thing. It's that combination of `cover` _and_ `fixed` that trips up iOS, so changing either does the trick :) – somethinghere Jun 22 '16 at 14:57

0 Answers0