Background position

This topic has 7 replies, 2 voices, and was last updated 6 years ago by Elise Noromit.

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
October 24, 2018 at 3:44 pm #84837

BigG
Participant

Hi,

My problem is that depending on which page you visit, the page background image is in varying positions. It seems like that on the pages that come with the site – they are mostly fine – but on pages that I have authored using the same page template (default) the background seems to shift.

For example, homepage is fine, product page is fine (until you use the filter). Basket page shifts while the checkout page is fine. If I create a new page – it seems to shift the background – eg http://newsite.lincolnshirefirewood.co.uk/delivery-area/.

I cant see why this is happening.

October 24, 2018 at 6:19 pm #84875

Elise Noromit
Member

Hello,

Thank you very much for choosing our theme and for contacting our support.

I compare the delivery page and shop page and see that the background the same, the difference in the content what visually looks like they are different.

Best Regards

October 25, 2018 at 10:56 am #85053

BigG
Participant

Please take another look. The background shifts to the left on some pages. See how it doesn’t line up with the header….
Would you like some screen shots?

Cheers G

October 25, 2018 at 11:45 am #85069

BigG
Participant

Please take a look at the attachment.
You can see the BG is shifted to the left and a “gap” appears on the right. The bg is not “covering” the entire space.

Attachments:
You must be logged in to view attached files.

October 25, 2018 at 1:52 pm #85130
Elise Noromit
Member
Hello,

I have compared the CSS for background on the shop page and on the delivery pages:

Shop page:
```
body {
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left top;
}
```
Delivery page:
```
body {
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left top;
}
```
Best Regards
October 26, 2018 at 5:11 pm #85482

BigG
Participant

Yes – I know. This is not the problem. The problem is that some pages are set up differently to others. If I set the size to “cover” – it works on the delivery page (a standard page) – but not on all the other theme pages. The container seems to be of different sizes so the background shifts.
Looks like the theme cant use backgrounds reliably…..
I really need you to look more closely at this – more than a cursory glance – there is a problem…

October 26, 2018 at 6:24 pm #85486

BigG
Participant

OK – I found a “fix” – not quite what i need but it will do for now. There is a minor discrepancy in the way the BG is presented across the screens within the theme.
I fixed it by centring the BG and making it cover the entire screen. I think Ill change the CSS to remove it on smaller screen sizes.
Thanks for your help.

October 26, 2018 at 7:31 pm #85493

Elise Noromit
Member

Hello,

No, I see the nature of the issue. Yes, when background size is cover the content influence the background view.

You can try background-attachment:fixed as an alternative.

Best Regards
Author

Posts