I'm trying to build a web site (http://idevsky.com) with a video background on my homepage. Right now it's just a test site to see how it's working. The size of the video might be too large, but it doesn't matter. Even if it's not running, you can see it as a still image all the way down to the site's footer.

I wish the Google Map and a Footer section were opaque (non transparent). I attached a print screen of the bottom of my homepage. As you can see, it really bothers to distinguish stuff while having a background like this. I want it to be white. Same way it's above Google Map where there's an article on the homepage. You can't see through it and you don't see the video, just white background. Same way I want it to be below the article (all the way down the page to its very end).     A print screen of the section I want to be non-transparent (opaque)

1 Answer 1


You can try adding the following CSS to your template:

#map {
    background: #fff!important;
    opacity: 1!important;

.bottom-d-outer {
    background-color: #000!important;

That should make the Google map background white, and the footer background black.

  • And what CSS file I should add this code into? Can't you tell from a live site?
    – Gregory
    Aug 2, 2016 at 18:00
  • @Gregory Try adding it to this file: /templates/jp-x2/css/custom.css, that should work. For more information on adding custom CSS code to your template, take a look at this post.
    – johanpw
    Aug 2, 2016 at 19:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.