Pinegrow Community Support Forum

Pinegrow experiment - creating a background image to fill the browser window

showcase
foundation
#1

Sunday afternoon trying out things in Pinegrow and created this nice simple layout using Foundation.

2 Likes
Ever get told "we've no budget but this job will give you great exposure"
#2

@Rob simple but classy and love the photo.

For Safari mobile, whats your preferred choice, include a hack/workaround or simply remove the fixed attachment?

1 Like
#3

@Jack_Clarity here’s the code I’m using and it seems to work for me. In my style.css I add the following:
header {
background-size: cover;
background-attachment: fixed;
background-position: center center;
}
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px) {
header {
background-attachment: scroll;
}
}

2 Likes
#4

@Rob just a heads up, as I did view the site from my ipad mini (yes I love my ipad!) and the parallax effect doesn’t work on firefox focus, safari or chrome.

#5

@Jack_Clarity that seems to be the trade off when doing it this way, you either the image too large to be viewable and not of much use or you get image displayed completely but it looses the parallax effect :frowning:

1 Like
#6

@rob unless I’m losing the plot (it has been known) but the image from my ipad mini doesn’t cover the background and the screen jumps slightly when scrolling the page

1 Like
#7

@rob now it works!

This is similar to my workaround, adjust the layout using media queries, rather than these hacks to force parallax effect.

1 Like
#8

@Jack_Clarity I added the following to the css to allow for iPads so maybe that is the difference
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
header {
background-attachment: scroll;}
}

1 Like
#9

@Rob my bad as i didnt view all of your css (had a lazy glance!) but obviously the media queries have to target all devices and this was the view before you updated the css (something for others to take note of)

This is one reason I now have various testing stations as you need to offer all visitors to your website the same viewing experience.

1 Like
#10

@Jack_Clarity one of the joys of having to accommodate so many devices in the modern world. Thanks for the feedback.

2 Likes