Cory's profile picture

Published by

published
updated

Category: Art and Photography

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


194 Kudos

Comments

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

lewis!

lewis!'s profile picture

using!! thank you very much


Report Comment

yitqsxo

yitqsxo's profile picture

Using!!! Tysm :D


Report Comment

﹒⇆﹒★ . DaNa !﹒ᶻz

﹒⇆﹒★ . DaNa !﹒ᶻz's profile picture

Using


Report Comment

DustZ

DustZ's profile picture

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~ ♡

♡ ~LollyPoPCrUsh~ ♡'s profile picture

USING


Report Comment

Vnxabri <3

Vnxabri <3's profile picture

Thank youu!!


Report Comment

earth angel

earth angel's profile picture

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

Purplgeist's profile picture

THIS RULES!!! I just put up my banner, thank you for this guide!


Report Comment

Squeezynutz

Squeezynutz's profile picture

Thank yewww :3


Report Comment

W1LLIAM

W1LLIAM's profile picture

UZING IT, TYZM :D


Report Comment

@.Kedenye

@.Kedenye's profile picture

using <3


Report Comment

Simmone

Simmone's profile picture

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

AXL's profile picture

how do you add multiple banners stacked vertically?


Report Comment

DANNY

DANNY's profile picture

this was so helpful! super easy to adjust the height too :D


Report Comment

Fluid Dynamic

Fluid Dynamic's profile picture

Thank you finally got my header looking better!!!


Report Comment

Sam

Sam's profile picture

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

александр>_<

александр>_<'s profile picture

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

o_o keir's profile picture

it dosen't work for me with the image i want.. =(


Report Comment

⠀☆⠀Vivienne

⠀☆⠀Vivienne's profile picture

Really helpful !!! Thank you


Report Comment

Elytri

Elytri's profile picture

thanks!


Report Comment