- Posts
Hi Jessie,
The Desktop version of my site has layers of transparency, where images and text scroll over the constant main site image. The mobile version does not do that of course. But lately i have seem some blogs that do have that ability. Is there any way i can make the mobile version of my site look more like the desktop version with the transparency and scrolling?
thanks
leeHi Lee-
I checked out your site on an Android device as well as in my browser’s mobile development tools, and it is showing a semitransparent background with your image fixed behind it like you described. Did you already solve this question, or is it behaving differently on an iPhone?
Hey Jessie
On the iPhone it is not transparent. The image is just placed at the top of the page and disappears as you scroll up.Lee
Hi Lee-
I think I remember that we added some custom CSS for your background images on iPhones in a previous thread. Can you paste your custom CSS here? I think we may have set it to scroll and we’ll need to modify that existing code to accomplish this.
Jessie
here is the code.boldgrid-css{ background: white; }
ul.nav { padding-inline-start: 40px; }
ul.nav>li>a {
padding-top: 0px;
padding-bottom: 0px;
}
ul.nav>li>ul>li>a {
display: list-item;
list-style: circle;
}
@media (max-width: 991px) {
body.custom-background {
background-size: auto !important;
max-height: 100vh;
background-position: center top !important;
background-color: rgb(35,35,35) !important;
}
}Hi Lee-
Thanks for that! Modify the second-to-last-line from center top !important to fixed !important and that should do the trick.
Hey Jessie,
That didn’t work. Made no difference.
Hi Lee-
Thanks for letting me know, I’m sorry I was wrong. I took another look into this and it looks like Apple still hasn’t implemented the fixed background property, even on the newest phones, because it tends to slow sites down and disrupt the scrolling appearance. Sources (1) (2) (3)
It looks like some web designers have found a way to hack around this in the site’s you’ve seen recently with fixed backgrounds on the iPhone, but we’ll need to do some research to see if we can implement those fixes into our themes. It does work on Android devices right now.
- The topic ‘Mobile version – Transparency’ is closed to new replies.
