profile picture

Published by corentin

published
updated

Category: Blogging

View corentin's Blog

View corentin's Profile

Report Blog Entry

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

profile picture

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

corentin

profile picture

@sirk: You can use the .profile-pic img selector to select only your avatar, and then just have fun


Report Comment

sirkaotik

profile picture

How do I make my profile picture move?


Report Comment

ash!!

profile picture

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

profile picture

Woahh the scrollbar gets affected too, I thought those weren't customizable anymore


Report Comment