kuba
-
Posts
2 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Posts posted by kuba
-
-
Site URL: https://www.calmetscoaching.com/
I wanted to use the same background image for both computer and mobile views but I had to modify the image in Photoshop and use it for the mobile view. , i injected this code (below) but the background image on mobile is repeating to every new section, regardless of even if i change the background image globally, what did i do wrong?
I'm also hiding sections which is working fine but i wonder if that is the culprit, i really don't know at this point.
The images Im providing show- 1. the image at the top and 2. that same image repeating to background of new section.
///////home//////
@media only screen and (max-width:640px){.section-background img {opacity:0}
.section-background {background-image:url(https://static1.squarespace.com/static/6122430dfca2354fa4e79253/t/6228c5f4a5db4603b9682fe5/1646839285875/MOBILE+BG+PLACEHOLDER.jpg);background-size:cover;background-position:center;
background-repeat:no-repeat;}}
// Hiding and showing sections
@media screen and (max-width: 641px) {
section[data-section-id="612253bcf20b113b3568e06a"] {
display:none !important;
}
}
@media screen and (min-width: 641px) {
section[data-section-id="6228d921d9320814c9ac2b40"] {
display:none !important;
}
}
Mobile Home Page background image Keeps repeating
in Mobile
Posted
Hi taunphan, thanks for answering. To answer your question, I don't need to place an image in the section in question using css, the problem is I used css to place a background image for the top section of mobile that is oriented differently than the PC image though they look a lot alike, and i added "do not repeat" and the end of the code but that top image is repeating in the 3rd section from the top as you can see in the images i provided. Here is the code i used for adding background image to top section----
@media only screen and (max-width:640px){.section-background img {opacity:0}
.section-background {background-image:url(https://static1.squarespace.com/static/6122430dfca2354fa4e79253/t/6228c5f4a5db4603b9682fe5/1646839285875/MOBILE+BG+PLACEHOLDER.jpg);background-size:cover;background-position:center;
background-repeat:no-repeat;}}
I'm aslo hiding sections from pc view, not sure if this is causing the problem but here is that code---
// Hiding and showing sections
@media screen and (max-width: 641px) {
section[data-section-id="612253bcf20b113b3568e06a"] {
display:none !important;
}
}
@media screen and (min-width: 641px) {
section[data-section-id="6228d921d9320814c9ac2b40"] {
display:none !important;
}
}