corentin's profile picture

Published by


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) :
content: "";
background: url('') 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


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


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:

background-color: black;

by corentin; ; Report


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's profile picture

How do I make my profile picture move?

Report Comment


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 {
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's profile picture

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

Report Comment