#changing background

Hello everyone, this is just a very basic tutorial on how to change the planetary links’ backgrounds to have images instead.  If the code doesn’t work, or if you have any further questions- please feel free to send me an ask on kanexis.tumblr.com.  I’ll try to rectify the issue as soon as possible. 

If you have trouble viewing the complete code, go to:

http://pastebin.com/4vYyfWQq

<!--First of all...

Insert the following code after <!---- Customizable Metalinks --->:-->

<meta name="image:planet1img" content=""/>

<meta name="image:planet1ximg" content=""/>

<meta name="image:planet2img" content=""/>

<meta name="image:planet2ximg" content=""/>

<meta name="image:planet3img" content=""/>

<meta name="image:planet3ximg" content=""/>

<meta name="image:planet3x2img" content=""/>

<meta name="image:planet4img" content=""/>

<meta name="image:planet4ximg" content=""/>

<meta name="image:planet5img" content=""/>

<meta name="image:planet5ximg" content=""/>

<!--Next- delete the code from-

/*planets*/

/*For customization of planets /not included in metalinks/ */

/*planet1*/

to /*-end of p5x-*/-->

And then replace with the following code:

#planet1 {

   margin-top:-10px;

   margin-left:-10px;

   background:black;

   background-image:URL({image:planet1img});

   background-size:cover;

   width:20px;

   height:20px;

      -webkit-transform: translateX(350px);

   -moz-transform: translateX(350px);

   -o-transform: translateX(350px);

   transform: translateX(350px);

       -webkit-animation: myOrbit 26s linear infinite;

      -moz-animation: myOrbit 26s linear infinite;

        -o-animation: myOrbit 26s linear infinite;

           animation: myOrbit 26s linear infinite;

           }

           @-webkit-keyframes myOrbit {

   from { -webkit-transform: rotate(0deg) translateX(350px) rotate(0deg); }

   to   { -webkit-transform: rotate(360deg) translateX(350px) rotate(-360deg); }

}

@-moz-keyframes myOrbit {

   from { -moz-transform: rotate(0deg) translateX(350px) rotate(0deg); }

   to   { -moz-transform: rotate(360deg) translateX(350px) rotate(-360deg); }

}

@-o-keyframes myOrbit {

   from { -o-transform: rotate(0deg) translateX(350px) rotate(0deg); }

   to   { -o-transform: rotate(360deg) translateX(350px) rotate(-360deg); }

}

@keyframes myOrbit {

   from { transform: rotate(360deg) translateX(350px) rotate(-360deg); }

   to   { transform: rotate(0deg) translateX(350px) rotate(0deg); }

}

#planet1:hover {

   -webkit-animation-play-state: paused;

   -moz-animation-play-state: paused;

   -o-animation-play-state: paused;

    animation-play-state: paused;

   margin-top:-30px;

   margin-left:-30px;

    width:60px;

    height:60px;

   -webkit-transition: all 0.4s linear;

   -moz-transition: all 0.4s linear;

   -o-transition: all 0.4s linear;

   -ms-transition: all 0.4s linear;

   transition: all 0.4s linear;

   }

/*-end of p1-*/

/*planet1x*/

#planet1x {

   margin-top:-8px;

   margin-left:-7px;

   background:black;

   background-image:URL({image:planet1ximg});

   background-size:cover;

   width:15px;

   height:15px;

      -webkit-transform: translateX(350px);

   -moz-transform: translateX(350px);

   -o-transform: translateX(350px);

   transform: translateX(350px);

       -webkit-animation: myOrbit 20s linear infinite;

      -moz-animation: myOrbit 20s linear infinite;

        -o-animation: myOrbit 20s linear infinite;

           animation: myOrbit 20s linear infinite;

           }

#planet1x:hover {

   -webkit-animation-play-state: paused;

   -moz-animation-play-state: paused;

   -o-animation-play-state: paused;

    animation-play-state: paused;

   margin-top:-20px;

   margin-left:-20px;

    width:60px;

    height:60px;

   -webkit-transition: all 0.4s linear;

   -moz-transition: all 0.4s linear;

   -o-transition: all 0.4s linear;

   -ms-transition: all 0.4s linear;

   transition: all 0.4s linear;

   }

/*-end of p1x-*/

/*planet2*/

#planet2 {

      margin-top:-10px;

   margin-left:-10px;

   background:black;

   background-image:URL({image:planet2img});

   background-size:cover;

   width:20px;

   height:20px;

      -webkit-transform: translateX(400px);

   -moz-transform: translateX(400px);

   -o-transform: translateX(400px);

   transform: translateX(400px);

       -webkit-animation: myOrbit2 26s linear infinite;

      -moz-animation: myOrbit2 26s linear infinite;

        -o-animation: myOrbit2 26s linear infinite;

           animation: myOrbit2 26s linear infinite;

           }

           @-webkit-keyframes myOrbit2 {

   from { -webkit-transform: rotate(0deg) translateX(400px) rotate(0deg); }

   to   { -webkit-transform: rotate(360deg) translateX(400px) rotate(-360deg); }

}

@-moz-keyframes myOrbit2 {

   from { -moz-transform: rotate(0deg) translateX(400px) rotate(0deg); }

   to   { -moz-transform: rotate(360deg) translateX(400px) rotate(-360deg); }

}

@-o-keyframes myOrbit2 {

   from { -o-transform: rotate(0deg) translateX(400px) rotate(0deg); }

   to   { -o-transform: rotate(360deg) translateX(400px) rotate(-360deg); }

}

@keyframes myOrbit2 {

   from { transform: rotate(0deg) translateX(400px) rotate(0deg); }

   to   { transform: rotate(360deg) translateX(400px) rotate(-360deg); }

}

#planet2:hover {

   -webkit-animation-play-state: paused;

   -moz-animation-play-state: paused;

   -o-animation-play-state: paused;

    animation-play-state: paused;

   margin-top:-30px;

   margin-left:-30px;

    width:60px;

    height:60px;

   -webkit-transition: all 0.4s linear;

   -moz-transition: all 0.4s linear;

   -o-transition: all 0.4s linear;

   -ms-transition: all 0.4s linear;

   transition: all 0.4s linear;

   }

/*-end of p2-*/

/*planet2x*/

#planet2x {

      margin-top:-8px;

   margin-left:-7px;

   background:black;

   background-image:URL({image:planet2ximg});

   background-size:cover;

   width:15px;

   height:15px;

      -webkit-transform: translateX(400px);

   -moz-transform: translateX(400px);

   -o-transform: translateX(400px);

   transform: translateX(400px);

       -webkit-animation: myOrbit2 46s linear infinite;

      -moz-animation: myOrbit2 46s linear infinite;

        -o-animation: myOrbit2 46s linear infinite;

           animation: myOrbit2 46s linear infinite;

           }

#planet2x:hover {

   -webkit-animation-play-state: paused;

   -moz-animation-play-state: paused;

   -o-animation-play-state: paused;

    animation-play-state: paused;

   margin-top:-30px;

   margin-left:-30px;

    width:60px;

    height:60px;

   -webkit-transition: all 0.4s linear;

   -moz-transition: all 0.4s linear;

   -o-transition: all 0.4s linear;

   -ms-transition: all 0.4s linear;

   transition: all 0.4s linear;

   }

/*-end of p2x-*/

/*planet3*/

#planet3 {

      margin-top:-8px;

   margin-left:-7px;

   background:black;

   background-image:URL({image:planet3img});

   background-size:cover;

   width:15px;

   height:15px;

      -webkit-transform: translateX(430px);

   -moz-transform: translateX(430px);

   -o-transform: translateX(430px);

   transform: translateX(430px);

       -webkit-animation: myOrbit3 46s linear infinite;

      -moz-animation: myOrbit3 46s linear infinite;

        -o-animation: myOrbit3 46s linear infinite;

           animation: myOrbit3 46s linear infinite;

           }

           @-webkit-keyframes myOrbit3 {

   from { -webkit-transform: rotate(0deg) translateX(430px) rotate(0deg); }

   to   { -webkit-transform: rotate(360deg) translateX(430px) rotate(-360deg); }

}

@-moz-keyframes myOrbit3 {

   from { -moz-transform: rotate(0deg) translateX(430px) rotate(0deg); }

   to   { -moz-transform: rotate(360deg) translateX(430px) rotate(-360deg); }

}

@-o-keyframes myOrbit3 {

   from { -o-transform: rotate(0deg) translateX(430px) rotate(0deg); }

   to   { -o-transform: rotate(360deg) translateX(430px) rotate(-360deg); }

}

@keyframes myOrbit3 {

   from { transform: rotate(360deg) translateX(430px) rotate(-360deg); }

   to   { transform: rotate(0deg) translateX(430px) rotate(0deg); }

}

#planet3:hover {

   -webkit-animation-play-state: paused;

   -moz-animation-play-state: paused;

   -o-animation-play-state: paused;

    animation-play-state: paused;

   margin-top:-30px;

   margin-left:-30px;

    width:60px;

    height:60px;

   -webkit-transition: all 0.4s linear;

   -moz-transition: all 0.4s linear;

   -o-transition: all 0.4s linear;

   -ms-transition: all 0.4s linear;

   transition: all 0.4s linear;

   }

/*-end of p3-*/

/*planet3x*/

#planet3x {

      margin-top:-8px;

   margin-left:-7px;

   background:black;

   background-image:URL({image:planet3ximg});

   background-size:cover;

   width:15px;

   height:15px;

      -webkit-transform: translateX(430px);

   -moz-transform: translateX(430px);

   -o-transform: translateX(430px);

   transform: translateX(430px);

       -webkit-animation: myOrbit3 28s linear infinite;

      -moz-animation: myOrbit3 28s linear infinite;

        -o-animation: myOrbit3 28s linear infinite;

           animation: myOrbit3 28s linear infinite;

           }

#planet3x:hover {

   -webkit-animation-play-state: paused;

   -moz-animation-play-state: paused;

   -o-animation-play-state: paused;

    animation-play-state: paused;

   margin-top:-30px;

   margin-left:-30px;

    width:60px;

    height:60px;

   -webkit-transition: all 0.4s linear;

   -moz-transition: all 0.4s linear;

   -o-transition: all 0.4s linear;

   -ms-transition: all 0.4s linear;

   transition: all 0.4s linear;

   }

/*-end of p3x-*/

/*planet3*/

#planet3x2 {

      margin-top:-10px;

   margin-left:-10px;

   background:black;

   background-image:URL({image:planet3x2img});

   background-size:cover;

   width:20px;

   height:20px;

      -webkit-transform: translateX(430px);

   -moz-transform: translateX(430px);

   -o-transform: translateX(430px);

   transform: translateX(430px);

       -webkit-animation: myOrbit3 38s linear infinite;

      -moz-animation: myOrbit3 38s linear infinite;

        -o-animation: myOrbit3 38s linear infinite;

           animation: myOrbit3 38s linear infinite;

           }

#planet3x2:hover {

   -webkit-animation-play-state: paused;

   -moz-animation-play-state: paused;

   -o-animation-play-state: paused;

    animation-play-state: paused;

   margin-top:-30px;

   margin-left:-30px;

    width:60px;

    height:60px;

   -webkit-transition: all 0.4s linear;

   -moz-transition: all 0.4s linear;

   -o-transition: all 0.4s linear;

   -ms-transition: all 0.4s linear;

   transition: all 0.4s linear;

   }

/*-end of p3x2-*/

/*planet4*/

#planet4 {

      margin-top:-10px;

   margin-left:-10px;

   background:black;

   background-image:URL({image:planet4img});

   background-size:cover;

   width:20px;

   height:20px;

      -webkit-transform: translateX(465px);

   -moz-transform: translateX(465px);

   -o-transform: translateX(465px);

   transform: translateX(465px);

       -webkit-animation: myOrbit4 60s linear infinite;

      -moz-animation: myOrbit4 60s linear infinite;

        -o-animation: myOrbit4 60s linear infinite;

           animation: myOrbit4 60s linear infinite;

           }

           @-webkit-keyframes myOrbit4 {

   from { -webkit-transform: rotate(0deg) translateX(465px) rotate(0deg); }

   to   { -webkit-transform: rotate(360deg) translateX(465px) rotate(-360deg); }

}

@-moz-keyframes myOrbit4 {

   from { -moz-transform: rotate(0deg) translateX(465px) rotate(0deg); }

   to   { -moz-transform: rotate(360deg) translateX(465px) rotate(-360deg); }

}

@-o-keyframes myOrbit4 {

   from { -o-transform: rotate(0deg) translateX(465px) rotate(0deg); }

   to   { -o-transform: rotate(360deg) translateX(465px) rotate(-360deg); }

}

@keyframes myOrbit4 {

   from { transform: rotate(0deg) translateX(465px) rotate(0deg); }

   to   { transform: rotate(360deg) translateX(465px) rotate(-360deg); }

}

#planet4:hover {

   -webkit-animation-play-state: paused;

   -moz-animation-play-state: paused;

   -o-animation-play-state: paused;

    animation-play-state: paused;

   margin-top:-30px;

   margin-left:-30px;

    width:60px;

    height:60px;

   -webkit-transition: all 0.4s linear;

   -moz-transition: all 0.4s linear;

   -o-transition: all 0.4s linear;

   -ms-transition: all 0.4s linear;

   transition: all 0.4s linear;

   }

/*-end of p4-*/

/*planet4x*/

#planet4x {

      margin-top:-10px;

   margin-left:-10px;

   background:black;

   background-image:URL({image:planet4ximg});

   background-size:cover;

   width:20px;

   height:20px;

      -webkit-transform: translateX(465px);

   -moz-transform: translateX(465px);

   -o-transform: translateX(465px);

   transform: translateX(465px);

       -webkit-animation: myOrbit4 24s linear infinite;

      -moz-animation: myOrbit4 24s linear infinite;

        -o-animation: myOrbit4 24s linear infinite;

           animation: myOrbit4 24s linear infinite;

           }

#planet4x:hover {

   -webkit-animation-play-state: paused;

   -moz-animation-play-state: paused;

   -o-animation-play-state: paused;

    animation-play-state: paused;

   margin-top:-30px;

   margin-left:-30px;

    width:60px;

    height:60px;

   -webkit-transition: all 0.4s linear;

   -moz-transition: all 0.4s linear;

   -o-transition: all 0.4s linear;

   -ms-transition: all 0.4s linear;

   transition: all 0.4s linear;

   }

/*-end of p4x-*/

/*planet5*/

#planet5 {

      margin-top:-10px;

   margin-left:-10px;

   background:black;

   background-image:URL({image:planet5img});

   background-size:cover;

   width:20px;

   height:20px;

      -webkit-transform: translateX(530px);

   -moz-transform: translateX(530px);

   -o-transform: translateX(530px);

   transform: translateX(530px);

       -webkit-animation: myOrbit5 20s linear infinite;

      -moz-animation: myOrbit5 20s linear infinite;

        -o-animation: myOrbit5 20s linear infinite;

           animation: myOrbit5 20s linear infinite;

           }

           @-webkit-keyframes myOrbit5 {

   from { -webkit-transform: rotate(0deg) translateX(530px) rotate(0deg); }

   to   { -webkit-transform: rotate(360deg) translateX(530px) rotate(-360deg); }

}

@-moz-keyframes myOrbit5 {

   from { -moz-transform: rotate(0deg) translateX(530px) rotate(0deg); }

   to   { -moz-transform: rotate(360deg) translateX(530px) rotate(-360deg); }

}

@-o-keyframes myOrbit5 {

   from { -o-transform: rotate(0deg) translateX(530px) rotate(0deg); }

   to   { -o-transform: rotate(360deg) translateX(530px) rotate(-360deg); }

}

@keyframes myOrbit5 {

   from { transform: rotate(0deg) translateX(530px) rotate(0deg); }

   to   { transform: rotate(360deg) translateX(530px) rotate(-360deg); }

}

#planet5:hover {

   -webkit-animation-play-state: paused;

   -moz-animation-play-state: paused;

   -o-animation-play-state: paused;

    animation-play-state: paused;

   margin-top:-30px;

   margin-left:-30px;

    width:60px;

    height:60px;

   -webkit-transition: all 0.4s linear;

   -moz-transition: all 0.4s linear;

   -o-transition: all 0.4s linear;

   -ms-transition: all 0.4s linear;

   transition: all 0.4s linear;

   }

/*-end of p5-*/

/*planet5x*/

#planet5x {

   margin-top:-8px;

   margin-left:-7px;

   background:black;

   background-image:URL({image:planet5ximg});

   background-size:cover;

   width:15px;

   height:15px;

      -webkit-transform: translateX(530px);

   -moz-transform: translateX(530px);

   -o-transform: translateX(530px);

   transform: translateX(530px);

       -webkit-animation: myOrbit5 28s linear infinite;

      -moz-animation: myOrbit5 28s linear infinite;

        -o-animation: myOrbit5 28s linear infinite;

           animation: myOrbit5 28s linear infinite;

           }

#planet5x:hover {

   -webkit-animation-play-state: paused;

   -moz-animation-play-state: paused;

   -o-animation-play-state: paused;

    animation-play-state: paused;

   margin-top:-30px;

   margin-left:-30px;

    width:60px;

    height:60px;

   -webkit-transition: all 0.4s linear;

   -moz-transition: all 0.4s linear;

   -o-transition: all 0.4s linear;

   -ms-transition: all 0.4s linear;

   transition: all 0.4s linear;

   }

/*-end of p5x-*/