Profile Codes 101: Backgrounds

  • Profile Codes 101: Backgrounds

    Hello! My name is Sailor♥KittyMoon! I have only seen a few guides on how to change your profile and I have a lot of people ask me how to do it. So I wanted to make this really simple and easy guide to show you how to do it yourself!  I hope you find this useful and easy to understand!

    WARNING: This guide is for desktop users! I can't promise this will work on mobile. If you want to change your profile, use a computer because there is a lot of copying and pasting involved. I can't imagine doing this on a phone!

     

    First of all, where do you go to to change your profile???

    To change the coding of your profile, go to your profile. 

    It's the very last button, on the far right!

     

    Then, under your avatar, click on Edit My Profile

    Your profile won't be pink, though!

     

    Then, click on the Profile Style tab.

    Easy so far, right?

     

    And you should find an empty box like this! Ta-da~

     How do I change my background?

    This is actually a tricky question to answer because your profile actually uses three different backgrounds: html, left, and middle.

    HTML Background


    Start with adding

     

    html {

     

    background-color: yourcolorcode;

     

    background-image: url("imageurlhere");

     

    background-attachment: fixed;}

     

    If you want to make your background one solid color, you'll have to find out the hex code for the color you want. Use that link to pick your color. For example, the code for green is #00ff00. So I would then put:

    background-color:#00ff00;

    If you want an image in the background, first find an image you want to use and get a direct url to the image. You will put that url in between the " ".

    The background-attachment part is just so your profile scrolls smoothly. 

     

    Left Background

    .generic_layout_container.layout_left {

    background-color: yourcolorcode;

    background-image: url("imageurlhere");}

    Again, if you want to make your background one solid color, you'll have to find out the hex code for the color you want. Use that link to pick your color. For example, the code for green is #00ff00. So I would then put:

     

    background-color:#00ff00;

     

    If you want an image in the background, first find an image you want to use and get a direct url to the image. You will put that url in between the " ".

     

    Middle Background

    .generic_layout_container.layout_middle {

    background-color: yourcolorcode;

    background-image: url("imageurlhere");}

    Again, if you want to make your background one solid color, you'll have to find out the hex code for the color you want. Use that link to pick your color. For example, the code for green is #00ff00. So I would then put:

    background-color:#00ff00;

    If you want an image in the background, first find an image you want to use and get a direct url to the image. You will put that url in between the " ".

     

    Transparency

    If you want your profile to be a bit see-through, use this code:

    body {opacity: 0.75;}

    After the "opacity" field, you can put any number between .01 (1% visible) and 1.0 (100% visible).

     

    Borders

    If you want borders, use this code:

    div {

    border: 1px solid;

    color: color;}

    You can change 1px to any number to make the borders thicker. 

    For some reason, hex color codes do not work in this field. You have to use color names like black, white, red, green, blue, etc. For the picture, I used pink.

     

    I hope this helps you! Shout-out to all the users that have awesome profiles! I used your pages to learn how to do all of this and share it. ♥ If you have any questions, feel free to comment below!

     

     

     

     

12 comments
  • ILostMyDignity
    ILostMyDignity pls make a video
    June 9, 2017
  • Kabochiii (Digiti)
    Kabochiii (Digiti) I know this is very old but, if anyone happens to be here and feel lost, you can just look for css documentation on google and all code stuff can be found there. Of course there is a lot more things than you need but just ignore everything that you don't...  more
    August 20, 2017
  • Jae Hwa
    Jae Hwa WOW! Very helpful! Thank you!
    February 16, 2018
  • RX HUNTER
    RX HUNTER Thanks
    June 23, 2019