- This topic has 47 replies, 4 voices, and was last updated 5 years, 10 months ago by Tom.
-
AuthorPosts
-
May 17, 2018 at 8:46 am #578103LeoStaffCustomer Support
It’s not working because you are using
background-size: center center;
which isn’t a valid statement.Can you try
background-position: center center;
like the suggestion above?So the overall mobile CSS should be:
@media (max-width: 768px) { body { background-image: url(http://innovationtitans.com/wp-content/uploads/2018/05/IMG_BG1_small.jpg); background-repeat: no-repeat; background-attachment: fixed; background-position: center center; background-size: inherit; } }
May 22, 2018 at 9:35 am #581886TomaszJust changed into what you have recommended. Now there is no image displayed on mobile at all.
I am looking for bugs but can’t find any.May 22, 2018 at 10:59 am #581940LeoStaffCustomer SupportThat’s weird. It’s working well on browser resizing.
Any caching plugins?
May 22, 2018 at 1:36 pm #582061TomaszYes, I know… Just checked this on another mobile device. Also, tried clearing cache – it didn’t help. And yes, I’m aware it works perfectly fine when resizing a browser!
Regarding caching plugins – so far I didn’t use any. Should I?
May 22, 2018 at 7:00 pm #582209TomLead DeveloperLead DeveloperHmm what could cause that…
Can you try removing the overlay color added by the Page Header?
May 23, 2018 at 1:56 am #582388TomaszPerhaps inheriting doesn’t work. I read that parent size property should be declared before applying it to the child element (can’t just be default). I wonder what is a parent of background in this case?
May 23, 2018 at 5:49 am #582561TomaszTom, just tried that. It didn’t help.
I will copy the page and build mobile css from scratch and see where that leads.May 23, 2018 at 6:36 am #582592TomaszJust checked. The background color of the home page is set in personalization/colors/content.
I added: “background: transparent;” just before loading an image. It clears the background nicely and resizing browser once again works very well… but still no image on a mobile device. It looks like for some reason it’s not being loaded.May 23, 2018 at 7:29 am #582629TomaszHmm, I have uncovered a pattern. As I remove some divs an image starts to gradually appear from the bottom. Deleting
May 23, 2018 at 8:13 am #582722TomaszCan someone explain what does this piece of code I was supposed to add do:
@media (min-width:769px) { .generate-inside-combined-content.page-header-content-container { margin-top: auto; } }
May 23, 2018 at 8:41 am #582754LeoStaffCustomer SupportThat’s placing the text at the bottom of the page as you requested.
You can try removing it to see what it does.
May 23, 2018 at 9:00 am #582765TomaszYes, that much I know 🙂 I wanted to understand the syntax a bit better.
Also, does it have to be put within a media query or can just have it above page media queries?May 23, 2018 at 9:03 am #582767LeoStaffCustomer SupportIt doesn’t have to wrap in media query – if you want the text to show up at the bottom on mobile too then you can remove it.
May 23, 2018 at 10:09 am #582804TomaszBy deleting
background-attachment: fixed;
I discovered that in fact an image is pushed down. It also seems to be centered vertically to the whole page instead of the top browser window.May 23, 2018 at 10:16 am #582810LeoStaffCustomer SupportNow that’s because
background-position
line below is setting it this way.@media screen and (max-width: 768px) body { background-image: url(http://innovationtitans.com/wp-content/uploads/2018/05/IMG_BG1_small.jpg); background-repeat: no-repeat; background-position: center center; background-size: inherit; }
Maybe it should be
background-position: top center;
? -
AuthorPosts
- You must be logged in to reply to this topic.