Full background GIF image

Hi (:

I am trying to make a GIFF the full background of my home page. I have removed the footer, but there seems still to be white borders. someone told me that i should de a full background i css instead. But i haven't been able to find a code that works. 

I also have css removing the footer on that page, but removing the code from the custom css box. dosen't seem to do anything. 

So far i have tried these two:

NO1:

body {
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
html {
    height: 100%
}

NO2:

html { 
  background: url(http://monemo.dk/wp-content/uploads/2018/04/GIF1.gif) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

- I didn't try them at the same time ;)

Comments

  • I just look a bit more on the page, it appers that it inserted the background in to the footer? the only css i have in the custom box is the NO1 code from above. 

    take a look here: http://monemo.dk/home-2/
  • Just for reference, this is what i am going for http://monemo.dk/ - just full screen
  • Hi,
    when you add it to HTML it works fine, http://prntscr.com/j0nonj
    All you need to do is to turn the content transparent, in theme options>global>general
    thanks
  • edited June 2018
    Thank you! it worked :D

    Now it just a bit strange when i scroll, it is like the picture is both in the footer and in the main area. It is being split up and looks strange: http://monemo.dk/home-3/ 
    (If you see on this page: http://monemo.dk/ You can se the place where the image splits on the other page, is the same place as where the white part starts on this page)

    I tried looking at it on different computers. It only appears on my 13" mac, but not on my boyfriends massive gamer screen. There you can't even scroll like you can on my mac. 

    in the custom CSS box of the http://monemo.dk/home-3/  page i have this written: 

    body {
        -moz-transform: scale(0.75, 0.75); /* Moz-browsers */
        zoom: 0.75; /* Other non-webkit browsers */
        zoom: 75%; /* Webkit browsers */
    }


    #Footer {
    display:none !important;
    }



    html { 
      background: url(http://monemo.dk/wp-content/uploads/2018/04/GIF1.gif) no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }

    (the spilt in the image problem disappears if i remove the scale CSS code, but i really hope there is an way i can keep it)

    Is there a way to fix it, or is to too complex? (:
  • Sorry, but we do not support such theme customizations, how would you like it to look like.
    Cheers.
Sign In or Register to comment.
This website uses cookies

We use cookies to personalise content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you’ve provided to them or that they’ve collected from your use of their services.

Cookies are small text files that can be used by websites to make a user's experience more efficient.

The law states that we can store cookies on your device if they are strictly necessary for the operation of this site. For all other types of cookies we need your permission. This means that cookies which are categorized as necessary, are processed based on GDPR Art. 6 (1) (f). All other cookies, meaning those from the categories preferences and marketing, are processed based on GDPR Art. 6 (1) (a) GDPR.

This site uses different types of cookies. Some cookies are placed by third party services that appear on our pages.

You can at any time change or withdraw your consent from the Cookie Declaration on our website.

Learn more about who we are, how you can contact us and how we process personal data in our Privacy Policy.

Please state your consent ID and date when you contact us regarding your consent.