🖥 CSS Snippet: Adding a Banner To Your Profile

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;
	}
}

170 Kudos

Comments

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

earth angel	1715713173 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; 1715928338; Report i hope this is not to late but u put it in ur about me or even in the who id like to meet section either one works and maybe a reason why whatever image ur trying to put is not showing up is cuz u gotta put the CSS in between those style tags like it says on the blog by 🦇 𝓕𝓻𝓮𝓪𝓴𝔂 Royce ! 𖤐 🏳‍⚧; 1719312131; Report
Purplgeist	1713768862 THIS RULES!!! I just put up my banner, thank you for this guide! Report Comment
Squeezynutz	1708379690 Thank yewww :3 Report Comment
𝑺𝑪𝑳𝑷𝑻𝑼𝑹𝑬𝑺	1708362855 yo this saved my life i was looking 4 this Report Comment
W1LLIAM	1706866239 UZING IT, TYZM :D Report Comment
@.Kedenye	1706424487 using <3 Report Comment
Simmone	1706193933 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; 1710616496; Report
AXL	1705286742 how do you add multiple banners stacked vertically? Report Comment
DANNY	1702363644 this was so helpful! super easy to adjust the height too :D Report Comment
Fluid Dynamic	1701633925 Thank you finally got my header looking better!!! Report Comment
Sam	1701570320 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 ; 1701574280; Report I did by Sam; 1701590046; Report
александр>_<	1697109402 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 ; 1701574258; Report
鶴井静則 ☆	1696823671 it dosen't work for me with the image i want.. =( Report Comment
⠀☆⠀Vivienne	1695836853 Really helpful !!! Thank you Report Comment
Elytri	1690921166 thanks! Report Comment
Test Profile	1690791802 How can I make the banner glow? like, I want to make outlines glow how do I do that... and thank you, this is very useful. :) Report Comment
wren	1685385949 THIS HELPED SO MUCHH Report Comment
allied_almond	1683479512 is there a way i could put a marquee inside the banner? Report Comment
eden :3	1681964271 thx!! Report Comment
kitty	1677262189 is there a way to make the banner smaller Report Comment change the width and the height!!! ex width: 50% or height: 150px by plasticasia; 1682116706; Report