-
Posts
-
Hello,
I’m trying to change my background image for the landing page when a mobile device visits. Before trying to get it to use a different image, I’m just trying to see if it can even remove the background image. I’ve tried adding this code to the Quick CSS, but it does not change anything:@media only screen and (max-width: 480px) {
.home div#av_section_1 { background: none !important; }}I figured changing it to a new image would be more complex so started with this code. It’s the landing page image in the back.
Any thoughts?
Hi Zuluster,
If the image you’re attempting to remove is done using the inline styles, I believe you’ll need to use
@media only screen and (max-width: 480px) { .home div#av_section_1 { background-image: none !important; } }Notice: background-image vs background property.
Thanks for the response, but that did not work. My background image is set using Pages > Landing Page > Editing the Color Section of the Landing Page > Insert Image. It says Insert Custom Background Image right next to it.
Hey Zuluster,
When I tested the code I provided (above) I tested it using a Page > Color Section > Background Image – just as you’ve described.
Have you checked to see what’s happening using the Inspector in Chrome, or Firebug?
Or, perhaps something is taking precedence over your background-image selector in the CSS?
Hard to say without seeing the code.I took a look through chrome inspector and hid elements until the background disappeared. This is the element that when hid, made the background disappear:
<div class=”av-parallax-inner main_color avia-full-stretch” style=”background-repeat: no-repeat; background-image: url(http://gainzgarage.com/wp-content/uploads/2015/10/LP_Background_Banner.jpg); background-attachment: scroll; background-position: center center; “></div>
There was also this overlay element before it, not sure if it matters:
<div class=”av-section-color-overlay” style=”opacity: 0.4; background-color: #ffffff; “></div>
- You must be logged in to reply to this topic.