SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2013
    Location
    Berlin
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background images not centering

    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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    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. #3
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,599
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Quirks mode is a style killer. I recommend that you add a real doctype to the top of the page. Something like this:
    Code:
    <!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:
    Code:
        <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. #4
    SitePoint Enthusiast
    Join Date
    Dec 2013
    Location
    Berlin
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,520
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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:

    http://codepen.io/paulobrien/details/zFrsi/

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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •