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.