Report Blog Entry
As you may have figured out, your page is customizable! You may have already found the layouts section, and while they can be quite impressive, I think it's more fun to do it yourself! It took me a while to figure out how to do it, so I'll be posting about how to do different customizations.
When doing any type of simple styling on your page you should start with:
<style>
</style>
These tell the website that you're styling the page. The '/' tells it that it's the end of the styling. You'll want to put any of your code in between these two lines.
Next, you'll add code to tell the website where you're editing. For background in the middle it's called the main. You also need to add fancy brackets to this one, where you'll put more code later. It's almost like the part outside the brackets is the 'where' and inside is the 'what'.
For this part of your page you want to enter:
main {
}
The placement of the brackets is how code is usually written. We just go with it lol.)
Next is telling the website what you're specifically changing. In this case it's the background, so within the brackets you'll enter:
background-color:
or
background-image:
Obviously, use the first one for a colour and the second for a picture.
For a background colour you can either type in a basic colour, HEX number or RGB values. Since it's how I was taught, I'll be using HEX. To find a HEX colour, you can either use the one from google by searching "colour picker" or using a website. You'll want to copy this series of letters and numbers (including #) and add it to your code. Make sure to end every line of code of your 'what' with a semicolon (;) to tell the website you're done changing that part. Example:
background-color: black;
or
background-color: #31702f;
For an image-background you first need to find a picture (you might have to try a few since they aren't always compatible). Then you'll add "url()" and copy and paste the image address into the brackets.
background-image: url(https://www.designbolts.com/wp-content/uploads/2012/11/Dark-crisp-and-subtle-tiny-black-lines-Tileable-Patterns.jpg);
(This is my background btw lol)
Comments
Displaying 7 of 7 comments ( View all | Add Comment )
jocelyn
this isnt working for me even with the hex code someone please help!!!
my code:
body {
background: url(https://i.pinimg.com/736x/34/0c/e3/340ce375379b02679d4d58e6e66d2f3f.jpg);
main:before {
width: 100%;
height: 125px ;
display: block;
content: "";
background-image: url(https://i.pinimg.com/736x/ed/82/61/ed8261de7688a63ef88e67016378f281.jpg);
background-position: center center;
background-size: cover;
body {
background-image: url(https://i.pinimg.com/736x/19/6a/0e/196a0e558e3fea84688ec434f0db578d.jpg);
!important;
background-color: black !important;
background-attachment: fixed !important;
margin: 0;
padding: 0;
<style>
main{background-image: url("https://i.pinimg.com/736x/19/6a/0e/196a0e558e3fea84688ec434f0db578d.jpg");(0, 0, 0, 0.2); background-position: center; background-size: 120%; !important;}
<style>
RICARDITOX
thx i was search in deep web for this shit
dogger chan <3 ♡
it worked for me :3
thank you
<NICOLE!>
hey, i tried to do this and it isnt working.
this is my code
main {
background-image: url(“
https://i.pinimg.com/originals/4e/73/5a/4e735aa633a8ea2d952e93b2b81ce3e9.gif”)
}
LucieX3
idk if I'm doing anything wrong but it didnt work for me,, here's what I put in:
background-image: url(https://i.pinimg.com/736x/ff/cc/7f/ffcc7f95bbfbcb666ae396a3eeca3266.jpg);
Hi! idk if you still need help or not, but the reason it's not working is because you need to put these " " before at the start of the image address and at the end.
background-image: url("https://i.pinimg.com/736x/ff/cc/7f/ffcc7f95bbfbcb666ae396a3eeca3266.jpg");
I took what you commented and added the " " to the start and the end of the image address. It should work for you now! If not, lemme know, if you see this!
by ☆Staraelia☆; ; Report
i did the samew thing as them, and i changed it to add the " ", but it still wont work? idk what i did wrong, maybe does it not work with a pinterest img link?
by pyan; ; Report
What if you try this?
main{background-image: url("https://i.pinimg.com/236x/87/50/32/8750324e2c25cdf822c1322c74396847.jpg");(0, 0, 0, 0.2); background-position: center; background-size: 120%; !important;}
Just copy this and change the image address to whatever you want and hopefully it should work! I used this exact code on my own profile (btw the image is from Pinterest, so that shouldn't be a problem) Remember to put this in the "About me" section of your profile!
by ☆Staraelia☆; ; Report
Also, don't forget to put the style tags before and after the code! It won't work otherwise.
by ☆Staraelia☆; ; Report
Kasper/Pest/Guest
Is there any way to outline the main bg?
Blmişko :D
Thx!!111!!1