Background images not centering

HTML & CSS
1

Hey there,

I was about to redesign my website and made some background which where background-attachment: fixed. Unfortunately this feature doesn’t work on iPads, so I wanted to set a media query so that the iPad users see the image without any moving. The first picture behind “video” works fine (I mean the pictures behind those headlines) but the second one zooms into the picture. The third one simply doesn’t appear. Don’t know why it won’t load. You can test the desktop version which works fine on most browsers already but on the iPad it won’t work.

I would like to look the second and third picture like the first one does. Without zoom and anything.

This is the website I am referring to : http://www.phermann.tk/new

Thank you!

2

background-attachment: fixed seems to mess with background-size, so perhaps remove fixed for smaller screens with a media query.

Don’t forget to optimize the images, too, as the first one is very slow to load.

3

Quirks mode is a style killer. I recommend that you add a real doctype to the top of the page. Something like this:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>Paul Hermann</title>
</head>

According to the validator, these are not valid links:


    <link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)" href="ipad-portrait.css">
    <link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)" href="ipad-landscape.css">
4

Thanks for your responses. I found a way to debug with ease on the iPad through the Safari Mobile Web Inspector. I can tick the CSS rules that I want to apply to the element chosen. So I un-ticked the boxes of background-attachment: fixed and suddenly the images were visible exactly how I wanted them to be!

But I actually put the background-attachment to scroll. I put an extra !important behind it and it worked then.
Thanks for your tips and help anyway!

Paul.

5

Hi,

The iphone and (some other mobile devices) don’t do background-attachment fixed as such but they can now do position:fixed elements so there is a way around the fixed background problem assuming that the fixed attachment is on the body element.

The solution is documented in my codepen here:

Otherwise you just need to remove the fixed background attachment for mobile devices (as you already found out :)).