If you want to add a banner to your profile, above your profile, here's an easy way to do it. I've also included a way to make it look great on mobile. For whatever image you use, adjust the height tags until it looks nice.
Remember: always put any CSS in between two Style tags: <style></style> That way, browsers will recognize that what you're trying to do is adjust the style. Also remember that CSS stands for Cascading Style Sheets, so the browser will activate styles from top to bottom!
main:before { width: 100%; height: 300px; display: block; content: ""; background-image: url('https://via.placeholder.com/1280x720.png'); background-position: center center; background-size: cover;}@media only screen and (max-width: 600px) { main:before{ height: 200px; }}
Comments
Displaying 20 of 34 comments ( View all | Add Comment )
lewis!
using!! thank you very much
Report Comment
yitqsxo
Using!!! Tysm :D
Report Comment
﹒⇆﹒★ . DaNa !﹒ᶻz
Using
Report Comment
DustZ
anyone know how to do this with a video/iframe? i'll try to figure it out myself anyway
Report Comment
i do not think i will be figuring this one out
by DustZ; ; Report
♡ ~LollyPoPCrUsh~ ♡
USING
Report Comment
Vnxabri <3
Thank youu!!
Report Comment
earth angel
im not experienced in making/using codes, where do i put what??
Report Comment
also everytime i try to insert an image link it doesnt work, the code just doesnt work or put anything on my profile other than the visible code in my about me
by earth angel; ; Report
you can js put it anywhere on your profile (about me, interests, etc..) and it should apply to ur profile automatically!
by lewis!; ; Report
Purplgeist
THIS RULES!!! I just put up my banner, thank you for this guide!
Report Comment
Squeezynutz
Thank yewww :3
Report Comment
W1LLIAM
UZING IT, TYZM :D
Report Comment
@.Kedenye
using <3
Report Comment
Simmone
Heey! I was wodnering if i could use a gif instead of an image by using this code?? Or do I have to modify it in a certain way to make the gif works? Thaaanks:)
Report Comment
u can use a gif, and no u wont have to change the code :)
by Digital★Stitches; ; Report
AXL
how do you add multiple banners stacked vertically?
Report Comment
DANNY
this was so helpful! super easy to adjust the height too :D
Report Comment
Fluid Dynamic
Thank you finally got my header looking better!!!
Report Comment
Sam
Every time I try this, it makes my background gray and I cant fix it. The banner itself is fine, but the background wont change from gray
Report Comment
Do you change the image URL to your image?
by Cory ; ; Report
I did
by Sam; ; Report
александр>_<
must the picture i want to add as banner be 1280x720?
Report Comment
No it doesn’t! And you can adjust the height or even the position of the background to get the image the way you like.
by Cory ; ; Report
o_o keir
it dosen't work for me with the image i want.. =(
Report Comment
⠀☆⠀Vivienne
Really helpful !!! Thank you
Report Comment
Elytri
thanks!
Report Comment