Tagged: , , ,

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • December 1, 2015 at 9:33 pm #545595
    1039 Online

    I have a website with pages set to Transparent & Glassy Header. At top of the pages I have a colored section with a background image. The background attachment (image) is set to Parallax and Stretch to Fit. The images work on a desktop, even when I have the browser as narrow as it will go (both Chrome and Firefox). However, on a phone, the background attachment images are not displaying the same as in the desktop browsers when they are narrow. It appears that the images go up behind the header and thus are hidden. The action seems to be dependent of device and not on screen width. So for example, on a desktop (with the browser super narrow), a person’s head might be showing including a lot of space above the person’s head, but on the phone, the person’s head and shoulders are cut off. How can I get the image to appear properly on a phone?

    December 2, 2015 at 5:15 am #545727
    Rikard

    Hi 1039 Online,

    To be able to control what part of the images are displayed you might have to create new sections for mobile and use images which are adapted to mobile screens. You can then hide/show the correct section using CSS like the following: 

    @media only screen and (min-width: 768px) {
 #section-desktop {
display:block !important;
}
 #section-phone {
display:none !important;
}
}

@media only screen and (max-width: 767px) {
 #section-desktop {
display:none !important;
}
 #section-phone {
display:block !important;
}
}

    Best regards,
    Rikard

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.