SDesires's profile picture

Published by

published
updated

Category: Web, HTML, Tech

Profile Customization Step 1. The Main Background

I recently saw a forum post where people were having issues with the customizing of their profiles, and CSS can be really confusing for people that don't do it a lot, have never done it, or are on itty bitty phone screens. So I posted this as a response and thought that it might help others as well. I hope that it does!



๑۞๑ø¤º°`°๑۩  HOW TO CHANGE THE MAIN BACKGROUND OF YOUR PROFILE ۩๑°`°º¤ø๑۞


Okay, I tried to simplify how to change your main background here. If this doesn't work for you, please copy the code that you used and show me and I will try to help you fix it, or I'm sure that another helpful person will try to help as well. We all deserve nice profiles don't we? "Emoticon_smile" Icon

I'm going to use my profile background as an example so you can see how it's supposed to look. 
Go to the site that Katie suggested: https://nein-mc.neocities.org/csstest/index.html

Now choose a code snippet to copy:

IF YOU WANT  A PICTURE AS A BACKGROUND


<style>
body {
     background-image: url("https://media.giphy.com/media/FlodpfQUBSp20/giphy.gif") !important;
     background-color: black !important;
     background-attachment: fixed !important;
     margin: 0;
     padding: 0;
}
</style>

(Make sure that you are copying the "style" tags as well or it won't work!)

IF YOU WANT  A COLOR AS A BACKGROUND



<style>
body {
     background-color: black !important;
}
</style>


Now, in the top white box, where it says, "Put anything (HTML, CSS) in the textarea below and it will get put into the about section", paste the code that you copied. 

If you chose the picture as a background code and you see the sparkly star background that's the same one as the one on my profile then yay! Now you can change it to the image that you want as your background. All you have to do is copy the URL or address of the picture that you want as your main background and replace this part: https://media.giphy.com/media/FlodpfQUBSp20/giphy.gif with it. Make sure that there are quotation marks on either end of the URL.  If the picture that you chose shows up as the background on the test page, you did it! Now copy the entire code, style tags and all, and then go to your SpaceHey profile.
Click on where it says, "Edit Your Profile". In the box labeled, "About Me", paste your code. Then save it. If all goes according to plan, you now have a picture background! "Emoticon_smile" Icon

If you chose a color as a background code and you see a black background on the test page then yay! Now you can change it to the color that you want as your background. Now the main colors are easy, you can just name them and bam! There they are, but there are so many variations of colors out there, and everyone likes a particular one. So I will direct you to a page with Hex numbers. These are usually a # sign and some letters and numbers. So here is a HTMLColor Code page where you can pick any color that you fancy. When you find one that you like, copy it'sHex code, for example: #9D12E2 (which is a random purple that I selected from the color picker at the top of the page) and then you are going to replace the word, "black" in the code with that number so that it looks like this:  background-color: #9D12E2 !important; 
(but with the number you chose instead) If the background changed to the color that you picked on the test page then you did it! (If not, make sure that you added the # symbol in front of the Hex code.) Now copy the entire code, style tags and all, and then go to your SpaceHey profile. Click on where it says, "Edit Your Profile". In the box labeled, "About Me", paste your code. Then save it. If all goes according to plan, you now have a colored background! "Emoticon_smile" Icon

Now remember, this ONLY applies to the MAIN background. You will still have the white box  in the middle, so don't freak out. I hope that this helps solve some of the frustrations some are you are having. "Emoticon_smile" Icon
And if your code is NOT working, copy it and let someone know that you think can help you, either myself or Miss Katie or post it on your blog and ask your friends for help. I have found that it's usually the simplest things that trip up code. 

Good luck!! "Emoticon_smile" Icon

~SDesires


Update 01/17/21: adding images to show where to add your code for your profile.

Go to your Profile like so: 

Top of my profile

Click on where it says, "Edit Your Profile". (on the right hand side).
That should bring you to this page:

About me section

That white box that you see all the writing in it is where you would add your code for your profile. Make sure to hit the "Save All" button at the top when you are done or else you have to do it over again!

I hope that this helps those that are confused :)


187 Kudos

Comments

Displaying 20 of 38 comments ( View all | Add Comment )

♱ 𝔞𝔰𝔭𝔥𝔶𝔵𝔦𝔞𝔱𝔦𝔬𝔫

♱  𝔞𝔰𝔭𝔥𝔶𝔵𝔦𝔞𝔱𝔦𝔬𝔫's profile picture

no matter what i do the background image never shows up. i uploaded the image to a private diary and then copied the url from there and it doesnt work. when i used inspect and copied the original url (for example the normal pinterest one) it didnt show up. im not sure what to do...


Report Comment



It only worked when I replaced the background color part with the image URL lol

by 𝓈𝒶𝓂𝓂𝒾☆; ; Report

♱ 𝔞𝔰𝔭𝔥𝔶𝔵𝔦𝔞𝔱𝔦𝔬𝔫

♱  𝔞𝔰𝔭𝔥𝔶𝔵𝔦𝔞𝔱𝔦𝔬𝔫's profile picture

no matter what i do the background image never shows up. i uploaded the image to a private diary and then copied the url from there and it doesnt work. when i used inspect and copied the original url (for example the normal pinterest one) it didnt show up. im not sure what to do...


Report Comment

Xx.R4t.Sm4cker.xX

Xx.R4t.Sm4cker.xX's profile picture

you have no idea how long i was racking my brain to make this work but thanks to you i now have miku as the background thank you thank you thank you


Report Comment

Starr

Starr's profile picture

So Spacehey broken? Because I’ve tried the test code and it works perfectly on the test run, but when I put it into my account it’s just a black backround, anyone have a solution?


Report Comment



Mine did that for a second. I had to just let it load.

by Leo Etgen; ; Report

RIA

RIA's profile picture

How can I change the size of my background?


Report Comment

Nana 🫧

Nana 🫧's profile picture

I'm probably stupid but it doesn't work :{ Every time i change my layout, the bg stays the same bg from the first layout i ever used, even though i already deleted any trace of that layout's link. Idk what to do anymore ig i'm stuck w/ the frutiger aero bg forever lol.


Report Comment



yah me too

by Jemma <\3; ; Report

peyton

peyton's profile picture

wait stop this saved my life!! ALSO... PSA!! if you want an image as ur background, u cant take it out as pinterest or whatever, drag it up/open image LINK and copy it! it should say i.pinimg.com instead of just 'pinterest.com' or whatvrrr ^_^


Report Comment



i got mine from the safari and only the color is showing up, not the image

by lexi; ; Report

u are glamorous. this worked thank u sm

by chloe; ; Report

u are glamorous. this worked thank u sm

by chloe; ; Report

Dani!

Dani!'s profile picture

Theres an existent layout i found and i liked it a lot except the background its plain blac kand i wanna change it to an image, how can i do that


Report Comment

𝓒𝓪𝓶𝓲</3

𝓒𝓪𝓶𝓲</3's profile picture

heeeyyy so i tried doing this and it appeared as a black background for other users and me as well is there anything I can do to fix it...?


Report Comment

ʚ♡ɞ Vanessa ʚ♡ɞ

ʚ♡ɞ Vanessa ʚ♡ɞ's profile picture

this worked thank you! but it gives me 3 images on top of each other instead of just one image (bad at explaining lol) is there a way to change the dimensions of the image or something?


Report Comment



Gotchu, had the same issue, try this:


body{background:url("YourImageLinkHere") no-repeat fixed; background-size:cover;}


the background size cover is to stretch the image, make sure you have one with big dimensions or the quality will be bad, the no repeat is for smoother loop if its a gif!

by 🜏⛧𝕶𝖆𝖗𝖒𝖆⛧🜏; ; Report

Jatzzombi >_<

Jatzzombi >_<'s profile picture

my image does not appear there is only a black color HEEELLPPPP


Report Comment



ME TOO

by minnieko; ; Report

I JS FOUND OUT HOW TO DO IT BTW so basically i was using an actual website (pinterest), but instead i dragged the image into a diff tab and copy pasted that url into the brackets instead and then it worked

by minnieko; ; Report

jantoday

jantoday's profile picture


Report Comment

michaelcera27

michaelcera27's profile picture

usign


Report Comment

madie

madie's profile picture

guys how the flip do i get a transparent background for the big white part in the middle is soo annoying trying to get help, ive been searching for so long omgg!


Report Comment



^^^

by chunky_banana3550; ; Report

i would just use the same photo for the center but if that doesn't look good ig you could try coding it to be transparent somehow but idk how you'd do something like that

by michaelcera27; ; Report

Stupid question but have you tried to play with opacity?

by vixen; ; Report

₊˚ʚ 🌱 ₊˚✧ ゚. Maya ₊˚ʚ 🌱 ₊˚✧ ゚.

₊˚ʚ 🌱 ₊˚✧ ゚. Maya ₊˚ʚ 🌱 ₊...'s profile picture

you literally saved me, thank youuuuu 💕


Report Comment

tomielomie

tomielomie's profile picture

THANK YOU OMFGAEAHEGFEJGV


Report Comment

⋆౨ৎ˚✩˖࣪ 𝒚𝒘𝒓𝒊

⋆౨ৎ˚✩˖࣪ 𝒚𝒘𝒓𝒊's profile picture

THANK YOU SOO MUCH
I was trying to add a background for hours and you saved me
Thank you >w<


Report Comment

Sayio24 (Krishy)

Sayio24 (Krishy)'s profile picture

thx m8 :>


Report Comment

Saige

Saige's profile picture

THANK YOU SO MUCH!!!


Report Comment

Lélé

Lélé's profile picture

OMGG THANK YOU SO MUCH


Report Comment