corentin's profile picture

Published by

published
updated

Category: Blogging

View Blog

View 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

Blankie_pls's 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

corentin's profile picture

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


Report Comment

eminem

eminem's profile picture

How do I make my profile picture move?


Report Comment

ash!!

ash!!'s 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

Shanen's profile picture

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


Report Comment