Title: Background globe
Last modified: February 3, 2024

---

# Background globe

 *  Resolved [aakerro](https://wordpress.org/support/users/aakerro/)
 * (@aakerro)
 * [2 years, 4 months ago](https://wordpress.org/support/topic/background-globe/)
 * Hi
   As you can see on the linked test site, the footer widget area has a photo
   of the moon surface as its background, taken from one of the “Earthrise” images
   from NASA. I want the globe to still be zoomable, but to fill the whole space
   of the browserwindow, and be behind the logo, navigation and footer widget area
   image.
 * I’ve been trying to do this by chatting wiht GPT4, since I’m no coder.
 * Cheers,
   Karl
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fbackground-globe%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 5 replies - 1 through 5 (of 5 total)

 *  Plugin Author [Carlos Moreira](https://wordpress.org/support/users/carlosmoreirapt/)
 * (@carlosmoreirapt)
 * [2 years, 4 months ago](https://wordpress.org/support/topic/background-globe/#post-17395641)
 * Hi [@aakerro](https://wordpress.org/support/users/aakerro/)
   You will need some
   custom css to place the logo below the logo and navigation, but let’s start with
   the most simple step, which would be to place the globe in the page, in the main
   content area, where you have the image right now.
 * The globe should take 100% of the available space, so then it will be a matter
   of adjusting with custom css. This is in the realm of customizations, but we’ll
   try to guide you.
 * Greetings, Carlos
 *  Plugin Author [Carlos Moreira](https://wordpress.org/support/users/carlosmoreirapt/)
 * (@carlosmoreirapt)
 * [2 years, 4 months ago](https://wordpress.org/support/topic/background-globe/#post-17395650)
 * Oh, I see you already have the globe there on the [https://united-earth.net/en/interactive-globe/](https://united-earth.net/en/interactive-globe/)
   page. Half the work is done. Now it’s a matter of being able to interact with
   the globe with the mouse, correct?
 * You can try this custom css, instead of the ones you currently have:
 *     ```wp-block-code
       .globe_wrapper {
           margin: 0;
           width: 100%;
           max-height: 300px; /* Add this line to make the wrapper take the full viewport height */
           position: relative; /* Add this line to fix the position relative to the viewport */
           top: 0;
           left: 0;
           min-height: 30vh; /* Set a minimum height for the globe */
       }
   
       .site-footer {
        position:relative;
        z-index:100;
       }
   
       .globe_aspect_ratio {
           max-height:500px;
           overflow:hidden;
           padding-top:50% !important;
       }
   
       .globe {
           width: 100%;
           height: auto; /* Adjust height to maintain aspect ratio, or set to 100% to fill */
           position: absolute;
           top: 0;
           left: 0;
       	pointer-events: auto; /* This will allow interaction with the globe */
           min-height: 30vh; /* Ensure it has a minimum height */
   
       }
       ```
   
    -  This reply was modified 2 years, 4 months ago by [Carlos Moreira](https://wordpress.org/support/users/carlosmoreirapt/).
 *  Thread Starter [aakerro](https://wordpress.org/support/users/aakerro/)
 * (@aakerro)
 * [2 years, 4 months ago](https://wordpress.org/support/topic/background-globe/#post-17395750)
 * That was a great improvement. The globe is behind the moon surface and interaction
   is possible. But is it also possible to let the globe fill the whole background,
   including behind the transparent logo and the primary menu element, and at the
   same time as we make sure the footer sticks to the bottom of the screen (no empty
   space, like we have now)?
    -  This reply was modified 2 years, 4 months ago by [aakerro](https://wordpress.org/support/users/aakerro/).
 *  Thread Starter [aakerro](https://wordpress.org/support/users/aakerro/)
 * (@aakerro)
 * [2 years, 4 months ago](https://wordpress.org/support/topic/background-globe/#post-17395817)
 * A GPT4 session solved most of it by 
   1) changing .globe_wrapper:position: absolute;
   2) adding:
 * `body { display: flex; flex-direction: column; min-height: 100vh; margin: 0; }`
   `.
   content-area { flex: 1; /* Takes up all available space */ } ``.site-footer {
   z-index: 10; /* Above the globe */ margin-top: auto; /* Pushes the footer to 
   the bottom */ }`The only thing now is that the footer bar is cut off a little
   bit, so the text in it doesn’t show. It would be nice if the bottom of it is 
   what sticks to the bottom of the screen (But this isn’t very important right 
   now).
 * ***
 * Thanks for your input, it was very important and helpful.
 * I have many more ideas for this plugin, since I have well defined needs for the
   site [https://united.earth](https://united.earth) (soon to open). United Earth
   is a project for a political movement to create the next step of our political
   evolution as stewards of the planet: a global democracy capable of tackling all
   the global threats to our biosphere and humanity as a whole. 
   We need to create
   a visualization lab for the project, as well as a data collection project with
   adequate high level geographical data. We want to propose a better geopolitical
   organization and need to illustrate how this may look like and gradually implemented.
   Tell me if you would be interested in joining this work.
 * best regards
   Karl
    -  This reply was modified 2 years, 4 months ago by [aakerro](https://wordpress.org/support/users/aakerro/).
 *  Plugin Author [Carlos Moreira](https://wordpress.org/support/users/carlosmoreirapt/)
 * (@carlosmoreirapt)
 * [2 years, 4 months ago](https://wordpress.org/support/topic/background-globe/#post-17403887)
 * Thank you for the update! Glad you managed to solve it! Impressive use of chatGPT
   🙂 
   Thank you for the positive rating also! We do plan to improve the plugin,
   so all feedback is welcomed. Most of the suggestions you listed in the review
   we will try to implement, if the plugin gains traction. Thank you once again 
   for the positive feedback!

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Background globe’ is closed to new replies.

 * ![](https://ps.w.org/interactive-globes/assets/icon-256x256.png?rev=3455067)
 * [Interactive Globes - 3D World Maps](https://wordpress.org/plugins/interactive-globes/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/interactive-globes/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/interactive-globes/)
 * [Active Topics](https://wordpress.org/support/plugin/interactive-globes/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/interactive-globes/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/interactive-globes/reviews/)

 * 5 replies
 * 2 participants
 * Last reply from: [Carlos Moreira](https://wordpress.org/support/users/carlosmoreirapt/)
 * Last activity: [2 years, 4 months ago](https://wordpress.org/support/topic/background-globe/#post-17403887)
 * Status: resolved