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 :)

19 Kudos

Comments

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

Blankie_pls	1613889466 Hey, this is pretty cool I've got a couple of questions How do I add before and after pseudo elements to the body of my profile? where in my profile do I even put my css? Report Comment Hello You can put all the css code in your blurbs, inside a style tag: <style> body{ background-color: black; } </style> by corentin; 1614189062; Report
corentin	1607897736 @sirk: You can use the .profile-pic img selector to select only your avatar, and then just have fun Report Comment
sirkaotik	1607784267 How do I make my profile picture move? Report Comment
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
Shanen	1607709591 Woahh the scrollbar gets affected too, I thought those weren't customizable anymore Report Comment