Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Background size on iOS

I've spent the morning doing research on the following issue. I'm making a one page site, using a lot of images. I'm aware that Safari is known for its weird handling of background-attachment:fixed, but that's working fine; my problem is background-size:cover is not working in conjunction with fixed.

I have 5 pages, all of which have a height or min-height of 100%. The last page is fixed like this:

#div5 {
  height:100%;
  width:100%;
  position: relative;
  background-image: url("img/background.jpg");
  background-attachment:fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

On iOS (in both Chrome and Safari) the background image is scaled to cover the full webpage, so it's really stretched.

At the same time, page 4 has the following css:

#div4 {
  min-height:100%;
  width:100%;
  background:url(img/portfoliobg.jpg);
  overflow: auto;
  background-size: cover;
}

and this works like a charm.

So, something makes the browser behave really weirdly when combining fixed and cover. Does anyone have a solution to this?

like image 894
Merijndk Avatar asked Jan 31 '14 09:01

Merijndk


People also ask

What is the size of an iPhone background?

iPhone X and XS: 2436 x 1125-pixel resolution. iPhone XR: 1792 x 828-pixel resolution. iPhone XS Max: 2688 x 1242-pixel resolution. iPhone 11: 1792‑x 828-pixel resolution.

What is iPhone 13 wallpaper size?

All of the iPhone 13 wallpapers offer a resolution of 3073 x 1420. This is a bit larger than the resolution listed on Apple's website, but this is done to account for motion, along with placing the wallpaper exactly how you want it.


1 Answers

Use another div with position:fixed to make the background fixed.

Like this: http://codepen.io/anon/pen/OVebNg

JADE

.fixed
  .bgcover

SCSS

.fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  .bgcover {
      background-image: url('http://globe-views.com/dcim/dreams/winter/winter-04.jpg');
      background-size: cover;
    width: 100%;
    height: 100%;
  }
}

Hope this help.

like image 192
Lydia Avatar answered Oct 17 '22 06:10

Lydia