# Pinegrow experiment - creating a background image to fill the browser window
**URL:** https://forum.pinegrow.com/t/pinegrow-experiment-creating-a-background-image-to-fill-the-browser-window/824
**Category:** Showcase
**Tags:** showcase, foundation
**Created:** [April 2, 2017, 2:25pm UTC](https://forum.pinegrow.com/t/pinegrow-experiment-creating-a-background-image-to-fill-the-browser-window/824 "2017-04-02T14:25:09Z")
**Posts on this page:** 14
**Page:** 1
### Author:  [@Rob](https://forum.pinegrow.com/u/Rob)
#### Post date: [April 2, 2017, 2:25pm UTC](https://forum.pinegrow.com/t/pinegrow-experiment-creating-a-background-image-to-fill-the-browser-window/824/1 "2017-04-02T14:25:09Z")
Sunday afternoon trying out things in Pinegrow and created this [nice simple layout using Foundation](http://www.graphicdesign.ie/pinegrow/pg1/index.html).
---
### Author:  [@Jack\_Clarity](https://forum.pinegrow.com/u/Jack_Clarity)
#### Post date: [April 2, 2017, 4:37pm UTC](https://forum.pinegrow.com/t/pinegrow-experiment-creating-a-background-image-to-fill-the-browser-window/824/2 "2017-04-02T16:37:52Z")
@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?
---
### Author:  [@Rob](https://forum.pinegrow.com/u/Rob)
#### Post date: [April 2, 2017, 5:51pm UTC](https://forum.pinegrow.com/t/pinegrow-experiment-creating-a-background-image-to-fill-the-browser-window/824/3 "2017-04-02T17:51:28Z")
@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;
}
}
---
### Author:  [@Jack\_Clarity](https://forum.pinegrow.com/u/Jack_Clarity)
#### Post date: [April 2, 2017, 6:55pm UTC](https://forum.pinegrow.com/t/pinegrow-experiment-creating-a-background-image-to-fill-the-browser-window/824/4 "2017-04-02T18:55:06Z")
@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.
---
### Author:  [@Rob](https://forum.pinegrow.com/u/Rob)
#### Post date: [April 2, 2017, 7:03pm UTC](https://forum.pinegrow.com/t/pinegrow-experiment-creating-a-background-image-to-fill-the-browser-window/824/5 "2017-04-02T19:03:49Z")
@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 ☹
---
### Author:  [@Jack\_Clarity](https://forum.pinegrow.com/u/Jack_Clarity)
#### Post date: [April 2, 2017, 7:12pm UTC](https://forum.pinegrow.com/t/pinegrow-experiment-creating-a-background-image-to-fill-the-browser-window/824/6 "2017-04-02T19:12:57Z")
@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
---
### Author:  [@Jack\_Clarity](https://forum.pinegrow.com/u/Jack_Clarity)
#### Post date: [April 2, 2017, 7:17pm UTC](https://forum.pinegrow.com/t/pinegrow-experiment-creating-a-background-image-to-fill-the-browser-window/824/7 "2017-04-02T19:17:27Z")
@rob now it works!
This is similar to my workaround, adjust the layout using media queries, rather than these hacks to force parallax effect.
---
### Author:  [@Rob](https://forum.pinegrow.com/u/Rob)
#### Post date: [April 3, 2017, 10:43am UTC](https://forum.pinegrow.com/t/pinegrow-experiment-creating-a-background-image-to-fill-the-browser-window/824/8 "2017-04-03T10:43:33Z")
@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;}
}
---
### Author:  [@Jack\_Clarity](https://forum.pinegrow.com/u/Jack_Clarity)
#### Post date: [April 3, 2017, 10:57am UTC](https://forum.pinegrow.com/t/pinegrow-experiment-creating-a-background-image-to-fill-the-browser-window/824/9 "2017-04-03T10:57:32Z")
@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.
---
### Author:  [@Rob](https://forum.pinegrow.com/u/Rob)
#### Post date: [April 3, 2017, 12:09pm UTC](https://forum.pinegrow.com/t/pinegrow-experiment-creating-a-background-image-to-fill-the-browser-window/824/10 "2017-04-03T12:09:10Z")
@Jack_Clarity one of the joys of having to accommodate so many devices in the modern world. Thanks for the feedback.
---
### Author:  [@randyrie](https://forum.pinegrow.com/u/randyrie)
#### Post date: [June 19, 2019, 4:06pm UTC](https://forum.pinegrow.com/t/pinegrow-experiment-creating-a-background-image-to-fill-the-browser-window/824/11 "2019-06-19T16:06:03Z")
After a lot of nagging from my artist daughter, I picked up an ipad (9.7") and also really like it but am experiencing a lot of difficulty building webpages that respond properly to its screen size. Here is a capture of what I’m trying to do:
What am I doing wrong that I cannot get a ‘proper’ display on my iPad’s Firefox or on Safari but it looks perfect in the Puffin browser? Anyone experience something similar & how did you fix the issue?
---
### Author:  [@Rob](https://forum.pinegrow.com/u/Rob)
#### Post date: [June 22, 2019, 12:28pm UTC](https://forum.pinegrow.com/t/pinegrow-experiment-creating-a-background-image-to-fill-the-browser-window/824/12 "2019-06-22T12:28:35Z")
@randyrie any chance you could share a link or the code so I can have a look at it and try to help.
---
### Author:  [@randyrie](https://forum.pinegrow.com/u/randyrie)
#### Post date: [June 22, 2019, 11:04pm UTC](https://forum.pinegrow.com/t/pinegrow-experiment-creating-a-background-image-to-fill-the-browser-window/824/13 "2019-06-22T23:04:40Z")
Thanks for your offer, @Rob…
The site’s URL is: [https://www.statecollegedev.com/rjrwebz/index.php](https://www.statecollegedev.com/rjrwebz/index.php)
When building the page in Pinegrow, the iPhone 6 page view shows this:
(This is the look that I expect but does not happen using Apple’s mobile devices running Safari, FIreFox, Opera, or Chrome - just Puffin works.)
So I’m wondering if its possible to fix this issue using CSS, @media queries, -webkit, -moz or some other coding or if I’m doing something incorrectly. (I assume you can open my site via the URL feature in PineGrow?)
Here is my CSS (sorry to hog so much of the page but the download does not allow CSS - only image files):
body {
overflow-x: hidden;
background-image: url(‘images/macbook-background.jpg’);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: top left;
background-color: #32383d;
}
div.row.maintop {
margin-top: 100px;
margin-bottom: 220px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
}
div.row.mainmd {
margin-top: 100px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
}
@media only screen and (max-width: 1023px) {
body {
background-image: url(‘images/macbook-background.jpg’);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: top left;
background-color: #32383d;
}
```
div.row.maintop {
margin-top: 100px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 100px;
}
div.row.mainmd {
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
}
```
}
@media only screen and (max-width: 768px) {
body {
background-image: url(‘images/macbook-background.jpg’);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: top left;
background-color: #32383d;
}
```
div.row.maintop {
margin-top: 100px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 150px;
}
div.row.mainmd {
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 220px;
}
```
}
@media only screen and (max-width: 668px) {
body {
background-image: url(‘images/macbook-background.jpg’);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: top left;
background-color: #32383d;
}
```
div.row.maintop {
margin-top: 0px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
}
div.row.mainmd {
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
}
```
}
@media only screen and (max-width: 375px) {
body {
background-image: url(‘images/macbook-background.jpg’);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: top left;
background-color: #32383d;
}
```
div.row.maintop {
margin-top: 100px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
}
div.row.mainmd {
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
}
```
}
input[type=text],
input[type=password],
select,
textarea {
width: 100%;
padding: 5px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
resize: vertical;
}
#slideout {
/\* position: absolute; \*/
z-index: 1000;
position: fixed;
top: 100px;
right: 0;
width: 30px;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}
#slideout\_tab {
position: relative;
top: 0;
left: -15px;
padding: 20px 0px 0px 0px;
text-align: center;
background: #526369;
color: #fff;
cursor: pointer;
-webkit-border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
border-radius: 5px 0 0 5px;
}
#slideout\_inner {
color: white;
position: absolute;
top: -50px;
left: 30px;
background: #526369;
width: 250px;
padding: 15px;
height: 400px;
cursor: auto;
-webkit-border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
border-radius: 5px 0 0 5px;
}
#showblock:checked + #slideout {
right: 250px;
}
#showblock {
display: none;
}
div.row.fixed-bottom {
background-color: #34383c;
margin-top: 16px;
color: #ffffff;
padding-top: 14px;
}
}
}
---
### Author:  [@AllMediaLab](https://forum.pinegrow.com/u/AllMediaLab)
#### Post date: [June 23, 2019, 2:50pm UTC](https://forum.pinegrow.com/t/pinegrow-experiment-creating-a-background-image-to-fill-the-browser-window/824/14 "2019-06-23T14:50:33Z")
Hi Randy,
If your interested you could use my self developed cross browser full screen foreground images system: [https://yourweblab.nl/full-screen/](https://yourweblab.nl/full-screen/) (you can test it in any browser or device and see what image is loading).
I implemented Lazy Sizes from Farkas on Github: [https://github.com/aFarkas/lazysizes](https://github.com/aFarkas/lazysizes) and created a couple of lines CSS magic that you can see when you look in to the page source. It serves every device with the proper pixel ratio image in webp and jpg.
An other example I made in Bootstrap 3: [https://www.buitenlust.nu](https://www.buitenlust.nu)
Bootstrap 4: [https://www.wilart.nl](https://www.wilart.nl)
My old website: [https://www.allmedialab.nl](https://www.allmedialab.nl)
The advantage of my system is super fast loading of the website and no unnecessary use of bandwidth!
The disadvantage is that at first it looks like a lot of work.
I created it for Bootstrap but it works on any framework including Foundation.
Unfortunately I have not much time for support.
You can make the resolution as high as you want by adding larger images to the system.
To create the images: [https://www.responsivebreakpoints.com/](https://www.responsivebreakpoints.com/)
Regards,
David