Styling your Curbly profile - Part 2: Images » Curbly | DIY Design Community

Styling your Curbly profile - Part 2: Images

By Mikael

Time for part 2 (of probably 3) in this series of blog posts (sorry for the long wait!) This'll be a short one about incorporating images on your profile page. I recommend that you read part 1 - CSS basics and colors before you read this. I'll use techniques and terminology described there without any explanation in this post.

Let's start the fun!

The use of images can greatly enhance the look and feel of your profile and make it really unique. If we want to add an image to the body of our profile we would use the property background-image, like this:

body {
background-image: url();
}

Inside the parenthesis we'd find the URL to the image in question. Let's try it with the Curbly logo found in the page header:

body {
background-image: url(http://www.curbly.com/images/header_logo.gif);
}

Wow, I outdid myself with that background. On a more serious note, there's some additional properties and values that will give us control over how images is displayed. Right now the image simply repeats itself until it fills the whole background. What it we only want it to repeat horizonatally or not at all? That and more can be done with these additional properties:

background-attachment
Interesting values: fixed and scroll. Fixed fixes the image to an exact place in the browser window, even if you scroll up or down. Scroll fixes the the image to an exact place on the page.

background-position
Interesting values: bottom, center, left, right and top. You can combine two values in the same syntax like this: background-position: top right;

background-repeat
Interesting values: no-repeat, repeat-x and repeat-y. X = horizontal, Y = vertical.

As I explained in my previous post, there's a property called background-color too. This can be combined with the above on the same element. Here's a syntax which uses all of the above properties:

body {
background-image: url(http://www.curbly.com/images/header_logo.gif);
background-attachment: fixed;
background-position: bottom right;
background-repeat: repeat-x;
background-color: rgb(175, 221, 74);
}

You could also use all of this on other elements than the body, like headers and paragraphs. Try using it with .profile as the selector:

.profile {
background-image: url(http://www.curbly.com/images/header_logo.gif);
background-attachment: fixed;
background-position: bottom right;
background-repeat: repeat-x;
background-color: rgb(175, 221, 74);
}

What is .profile you ask? I'll explain it in my next post but we're done with CSS for now. Good job!

All this is pretty useless to know without any images to use. Here's a few relevant and helpful links:

RepeatXY - Patterns specifically made for use as backgrounds. There's also an online editor of some sort. I havn't tried it myself.

K10K - My favorite pattern site.

SXC - Free stock images

You can of course also make your own images and patterns or use photographs. You could also borrow images from other sites but be sure to ask for permission first.

That's it for this time. I have a feeling I forgot something so if anything sounds weird or if you feel you miss some info, drop me a line!

Tagged:
css modify profile style curbly html