My site (ballymoretales.com) is live now on Netlify. Thank you for your help. One thing I notice is that when a page loads, the background is briefly white before the background image loads. Can this brief white screen be eliminated? Interestingly, the white screen issue appears on my ipad when using Safari but not when using Chrome. It also does not appear on my Macbook. This seems to be a browser specific issue. Thanks.
I am guessing here. Maybe it’s because the background image is loaded on a pseudo element. What happens if you add it to the body or another div?
It happens on Linux with Firefox and Brave too but not with Chromium/Chrome or Opera.
I wouldn’t worry even if users do notice the brief background delay. It’s barley noticeable when the image is already cached. (Compare Ctrl+F5 vs F5)
1 Like
An image always has to load the first time so there will always be a delay depending on situation and browser and the weight of the image. It happens on all my browsers if I refresh and will happen on any site with a large image.
OFF Topic
Why did you limit the width of the image as it looks really strange on my monitor with a big gap at the side? That wasn’t the code we previously worked on?
1 Like
lol, you have a very wide monitor. I can remove the max-width restriction. thanks. I’ve removed the restriction. Does the background look pixelated on your monitor?
Here is the current code:
body {
background: url(“/imgMaster/old-parchment.jpg”) no-repeat center center/cover;
width: 100vw;
height: auto;
}
When I visit other sites on the ipad, there is no flash.
I’ve been playing with the background image. Here is the current code:
body {
background: url(“/imgMaster/old-parchment1.jpg”) repeat-y center center/cover;
width: 100vw;
height: auto;
}
It was originally no-repeat. It stretched vertically quite a bit when there was more content. So I changed it to repeat-y but that seems to have had no effect. Is there another setting change I need so that it will repeat vertically? Thanks
I get the exact same thing on this demo page of mine.
http://www.pmob.co.uk/temp2/side-menu.html
Is this a different question?
I’ve never seen that background before.
You can’t repeat that image as it won’t join at the repeated edges.
Where is that image supposed to show? If you were replacing the yellow body background with that image then you are doubling the ipad problem as you have 2 massive images needed to be loaded immediately (about 150k each image).
I’m guessing that you want a viewport sized image only so you would need to use background-attachment:fixed with no-repeat and background-size:cover. However hat won’t work on ios (ipad or iphone as it will stretch the image across the whole document in error.
You could try this:
body::after {
content: "";
position: fixed;
z-index:-2;
top: 0;
left: 0;
bottom: 0;
right:0;
background: url(/imgMaster/old-parchment1.jpg) no-repeat center center;
background-size: cover;
}
Of course I have no idea what you wanted to do lol 
Yes, sorry this is a new question. The “old-parchment” image is the background for most pages. Currently, the image stretches to cover the page as required. When there is more content, it stretches more because it is no-repeat. I would prefer it to repeat vertically. I’ve been able to create an image that matches pretty well when it repeats. I haven’t got the code figured out yet to properly display the repeating background image.
The best option is the one I gave you.
If you want it to repeat in your example then just use repeat but you can’t do it with your image as it is not made for a seamless repeat. If you want a parchment effect then you are going to need a smaller image that matches at all edges so it can repeat horizontally and vertically. You can’t just repeat your large image vertically because it is smaller than most of the monitors these days (like mine). The average monitor resolution these days will be above 1500 and most likely 1920 (excluding mobile).
However as I said above I gave you what I think is the very best option as you can use the whole image and don’t lose the parchment effect. the image will never stretch further than the viewport so will not become oversized or stretched. It will always cover the content because it is fixed to the viewport so doesn’t matter how long the content will be.
I agree, yours is the best option. Thanks. I think the site is in pretty good condition now.
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.