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 :)
Comments
Displaying 5 of 5 comments ( View all | Add Comment )
Blankie_pls
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?
Hello
You can put all the css code in your blurbs, inside a style tag:
<style>
body{
background-color: black;
}
</style>
by corentin; ; Report
corentin
@sirk: You can use the .profile-pic img selector to select only your avatar, and then just have fun
sirkaotik
How do I make my profile picture move?
ash!!
if you're just interested in replacing the background of the page with an image, you can write something like
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
Shanen
Woahh the scrollbar gets affected too, I thought those weren't customizable anymore