A nice little bit of css

Hello :)

Here's my css for my background image (the clouds loop) :

body::after{
content: "";
background: url('https://up.l3m.in/file/1606821258-clouds-optimized.gif') no-repeat 100% 100% fixed;
background-size: cover;
opacity: 0.5;
top: 0;
left: 0;
right: 0;
bottom: 0;
position: fixed;
z-index: -1;
}

The cool little tricks are the size of the bg image (100% width and 100% height), the fact that the image is fixed (it will move if you scroll on the page), and the background-size: cover does a zoom of the image if it is not to the right proportions.

The fact that I set the background in a pseudo-element forced me to define the size of this element (content, top, left, right & bottom properties).

Here are some links if you're interested:

- general doc about background in css (on css-tricks because it's more friendly than the mdn page)
- background size property (on mdn because it has cool examples)
- background attachment property (on mdn because the links are broken in css-tricks examples)

Have a nice day trying things in css :)

25 Kudos

Comments

Displaying 4 of 4 comments ( View all | Add Comment )

corentin	1607897736 @sirk: You can use the .profile-pic img selector to select only your avatar, and then just have fun :) Report Comment
Sirkaotik (December 2020 user)	1607784267 How do I make my profile picture move? Report Comment This is by Twilight Sparkle on here .profile-pic > img { display:none; } .profile-pic:after { background-image: url("https://i.pinimg.com/originals/f4/33/1f/f4331f267e3263496d6d60f5688573ac.gif"); display: inline-block; content:"" } .blog-entry .profile-pic:after, .bulletin .profile-pic:after { background-size: cover; width: 110px; height: 110px; } /* blogs, bulletins / .general-about .profile-pic:after { background-size: cover; width: 160px; height: 160px; } / profile / by Effervescent; 1649191508; Report This is by Twilight Sparkle on here .profile-pic > img { display:none; } .profile-pic:after { background-image: url("https://i.pinimg.com/originals/f4/33/1f/f4331f267e3263496d6d60f5688573ac.gif"); display: inline-block; content:"" } .blog-entry .profile-pic:after, .bulletin .profile-pic:after { background-size: cover; width: 110px; height: 110px; } / blogs, bulletins / .general-about .profile-pic:after { background-size: cover; width: 160px; height: 160px; } / profile / by Effervescent*; 1649191509; Report
ash!!	1607749626 if you're just interested in replacing the background of the page with an image, you can write something like `body { background: url('https://up.l3m.in/file/1606821258-clouds-optimized.gif') no-repeat bottom / cover fixed; }` this doesn't need the pseudoelement, which may or may not be an advantage for the person reading this - corentin does a color fade behind the clouds to tweak how they display, so it isn't directly usable for them Report Comment thank you. by Effervescent; 1649191821; Report I LOVE U TYTYTYTY!!!! by bigbabytoez(=^ェ^=); 1728191520; Report
Shanen	1607709591 Woahh the scrollbar gets affected too, I thought those weren't customizable anymore Report Comment