HOME | DD

Description
body div#devskin10299383 hr { }

Introduction
Custom shapes and images are an integral part of any journal skin. They can include buttons, icons, header backgrounds, dividers, textures - sometimes the whole design is one big, sliced image artwork with a text area so one can rightly call it a journal skin. Other times the custom image usage is low or non-existent, and you wouldn't believe how coders make their skins rock anyway (or because). In this Let's code! I'm going to address the different background properties and their values.

Index
1. The Background Property: Structure

1.1 background-color
1.2 background-image
1.3 background-repeat
1.4 background-position
+ a nifty tip
1.5 background-attachment
1.6 Shorthand Form

1. The Background Property: Structure
There are five properties associated with "background":

background-color
background-image
background-repeat
background-position
background-attachment

1.1 background-color
As the name suggests, this property defines the color of an element's background. You can also use it to make the background transparent. Now you may want to ask, "Why make the background transparent?" When you are creating your own journal style you will be presented with the default deviantART skin with its own properties and values. Usually, you'll want to get rid of that stuff nice and easy. Putting

* {background: transparent;}

into your code will ensure that each and every background-color property returns as transparent due to the use of the universal selector *. I like to call it the "God Selector" or "Ultimate Parent", because whatever you put in there, it will match every element inside your code. Of course you can "overwrite" the universal selector's transparent value by manually setting the various element's background-colors where you need and want them.

A short discourse into parent and child relationships. CSS coding is a lot about structure, and just like in HTML and pretty much any other scripting language this structure consists of containers that contain containers that contain containers that contain content, if you catch my drift. If you specify Verdana as font-family for the "upper-most" container, this property and value will automatically be inherited by its sub-containers, unless you dictate otherwise. It is a dynamic that you should keep in mind.

background-color: red;
Yes, you can put in the name of the color you want to use, but I'd strongly advise against it. You relinquish virtually all control over the resulting color, except for the basic red, green, blue, black, white, and so on.

Hexadecimal color values
I daresay that this is the most commonly used value variation. A hex code looks like this:

#FF0000

It consists of six digits ranging from 0 to FF, with 0 being the lowest and FF being the highest. The first pair of digits defines the color RED, the second pair of digits defines the color GREEN, and the third pair of digits defines the color BLUE. In above example you'd get a bright red, because the first two digits controlling red are set to FF, the highest value, while green and blue are set to 0, the lowest value.

There is a shorthand form that can be used in CSS. If you have a hex color value like #000000, which is black, you can shorten it to #000. Same goes for #FFFFFF (#FFF ), which is white, and also #AA6622 (#A62 ), which is some creepy orange-brown if you must know. You cannot use it on a hex value like #A26BDF , a quirky purple.

RGB and RGBA
RGB stands for the color channels Red Green Blue. The intensity of the colors is being defined by values ranging from 0 to 255, or percentages ranging from 0% to 100%. Example, both putting out the same bright red:

background-color: rgb(255, 0, 0);
background-color: rgb(100%, 0%, 0%);

RGBA adds to RGB with a fourth channel, the alpha channel. This is not a color channel; the value defines the opacity of your chosen color, 0.0 translating as full transparency and 1.0 translating as full visibility. So, 0.5 would be 50% visbility.

background-color: rgba(255, 0, 0, 1.0);

There are also HSL (Hue Saturation Lightness) and HSLA (Hue Saturation Lightness Alpha), but they are not supported (yet?), so I won't delve into it.

1.2 background-image
The art to put a custom image into your skin. Now, mind you, "background" is a bit misleading as a term here. You're not using this property solely to code in actual backgrounds, but also all the rest of your custom images you want properly defined or customized and not in the journal body via HTML code. That said, getting an image into your skin is as easy as being too lazy to come up with a funny analogy. It's the formatting that may or may not make you bite into your keyboard. But more on formatting later. First off, example code minus formatting:

.image {background-image: url('IMGURL');}

1.3 background-repeat
You may have an image that needs repeating, like a tiled texture. Or an image that doesn't need repeating. Either way, as you will have gleaned from the property name, this is the way to do it. There are five possible repeat values:

no-repeat: The image won't be repeated.
repeat-x: The image will be repeated along the x-axis, aka horizontally, like: left to right.
repeat-y: The image will be repeated along the y-axis, aka vertically, like: top to bottom.
repeat: The image will be repeated on both axes.
inherit: The image will repeat or not depending on the settings of the parent element.

Example:

.image {
background-image: url('IMGURL');
background-repeat: no-repeat;}

1.4 background-position
One very subjective view of mine I want to share with you holds that this property is one of the most useful and effective properties in all the image formatting options (on dA, at least). Background-position is awesome for several reasons I will tell you about in a bit, but let's start with what it actually does. It specifies the position of your image. Yeah, you go ahead and roll your eyes at me, but you may want to stop for a moment to have a look at the values:

right top
left top
center top
right center
left center
right bottom
left bottom
center bottom
center center
Should you omit either of the two values it will always return center.

percentage
Two values, the first specifying the percental position on the x-axis, the second on the y-axis. 0% 0% by default. Should you omit either of the two values it will always return 50% (in other words: center). Keep in mind that these values are the percental equivalent of the list above. The default 0% 0% is top left, while 100% 100% is right bottom. Likewise, 50% 50% would be center center. The difference is that you have more control in positioning the image.

positions
A lot like percentage. Actually, exactly like it as there is no CSS unit specified for use with these values. px, %, cm, mm, in, pc... You can also mix positions and percentages. As is usually the case, the first value is X, the second value is Y, X being horizontal, Y being vertical.

inherit
The position will depend on the settings of the parent element.

Example for further reference:

.image {
background-image: url('IMGURL');
background-repeat: no-repeat;
background-position: 100% 20px;}

So, you see, background-position helps you a great deal in moving an image around. But the usefullness does not end here, in fact, it only just started.

Moving an image inside its own boundaries
Let's say you - stop thinking why the heck you'd ever want to do that - you have an image, and you want that image to change to another image on mouse over. Logic dictates that you'll need two different images: the regular image, and the on-hover image. The code would look something like this:

.regularimage {
background-image: url('regularimage.jpg');
background-repeat: no-repeat;
width: image-width-in-px;
height: image-height-in-px;}

.regularimage:hover {
background-image: url('hoverimage.jpg');
background-repeat: no-repeat;
width: image-width-in-px;
height: image-height-in-px;}

And yes, that would very much work. Although on loading the page only the regular image would be loaded, not the hover image, which would only then be loaded when the visitor hovers his cursor over it. A small file size will act to your advantage; you may be lucky. But there is the possibility that the visitor hovers his cursor over the regular image, and the image vanishes to reveal background while the hover image loads and then pops up. The loading process can take up the smallest amount of time, but it will be seen, and it will be ugly.

What to do about it?

Simple. Two images, one file. By placing the hover image into the same file as the regular image, they will be loaded simoultaneously. No loading time inbetween mouse over and hover image appearance. To better illustrate my point I've made two simple buttons and saved them in one file:

Now to the CSS code. The image width will be 173px - because that's the width of the buttons - and the height will be enough to show one of the buttons. One button is 30px, so the height is going to be 30px. The code for the regular button will look like this:

.button {
background-image: url('IMGURL');
background-repeat: no-repeat;
background-position: 0 0;
width: 173px;
height: 30px;}

Making for this:

As you can see I didn't change the default background-position values. 0 0, after all, is top left. The CSS code for the hover button will look somewhat like this:

.button:hover {
background-image: url('IMGURL');
background-repeat: no-repeat;
background-position: center bottom;
width: 173px;
height: 30px;}

Now hover over this:

Same file, different image. Might come in handy. Stacking up images in one file - for optimization purposes, for positioning purposes, for in-boundary positioning purposes, for all of those purposes, and any other purpose you can think of.

1.5 background-attachment
This one has three values, and since the most common variant also happens to be the default, background-attachment is not often used. The three values are:

scroll
This is the default value. The image scrolls with the element, meaning that it has a place inside your journal skin (or design of whatever kind) and it will stay put when you scroll down the page.

local
The image does move on scroll in regards to the element's contents.

fixed
The image is fixed and moves with your scrolling; not with a specific element or content, but the viewpoint. As soon as the image hits the upper part of the page, it will follow you down, and when you scroll up, it will follow you up again. This comes in handy when you have a dynamic design and an intricate background. Despite the fact that the design can be prolonged as far as one wishes, the background image will always follow.

.image {
background-image: url('IMGURL');
background-attachment: fixed;}

1.6 Shorthand Form
What is a shorthand form, you ask? Well, a shorthand strives to shorten the properties by compressing all of them into one. In the background's case, an image taking advantage of every property would look like this:

.image { background: transparent1 url('IMGURL')2 no-repeat3 scroll4 center top5;}

1 background-color
2 background-image
3 background-repeat
4 background-attachment
5 background-position

In that order. It does not matter if one is missing, as long as the order is kept.

Stay strong! Stay CSS.
Celvas

Bullet; Green — Description
body div#devskin10299383 hr { }

Introduction
Custom shapes and images are an integral part of any journal skin. They can include buttons, icons, header backgrounds, dividers, textures - sometimes the whole design is one big, sliced image artwork with a text area so one can rightly call it a journal skin. Other times the custom image usage is low or non-existent, and you wouldn't believe how coders make their skins rock anyway (or because). In this Let's code! I'm going to address the different background properties and their values.

Index
1. The Background Property: Structure

1.1 background-color
1.2 background-image
1.3 background-repeat
1.4 background-position
+ a nifty tip
1.5 background-attachment
1.6 Shorthand Form

1. The Background Property: Structure
There are five properties associated with "background":

background-color
background-image
background-repeat
background-position
background-attachment

1.1 background-color
As the name suggests, this property defines the color of an element's background. You can also use it to make the background transparent. Now you may want to ask, "Why make the background transparent?" When you are creating your own journal style you will be presented with the default deviantART skin with its own properties and values. Usually, you'll want to get rid of that stuff nice and easy. Putting

* {background: transparent;}

into your code will ensure that each and every background-color property returns as transparent due to the use of the universal selector *. I like to call it the "God Selector" or "Ultimate Parent", because whatever you put in there, it will match every element inside your code. Of course you can "overwrite" the universal selector's transparent value by manually setting the various element's background-colors where you need and want them.

A short discourse into parent and child relationships. CSS coding is a lot about structure, and just like in HTML and pretty much any other scripting language this structure consists of containers that contain containers that contain containers that contain content, if you catch my drift. If you specify Verdana as font-family for the "upper-most" container, this property and value will automatically be inherited by its sub-containers, unless you dictate otherwise. It is a dynamic that you should keep in mind.

background-color: red;
Yes, you can put in the name of the color you want to use, but I'd strongly advise against it. You relinquish virtually all control over the resulting color, except for the basic red, green, blue, black, white, and so on.

Hexadecimal color values
I daresay that this is the most commonly used value variation. A hex code looks like this:

#FF0000

It consists of six digits ranging from 0 to FF, with 0 being the lowest and FF being the highest. The first pair of digits defines the color RED, the second pair of digits defines the color GREEN, and the third pair of digits defines the color BLUE. In above example you'd get a bright red, because the first two digits controlling red are set to FF, the highest value, while green and blue are set to 0, the lowest value.

There is a shorthand form that can be used in CSS. If you have a hex color value like #000000, which is black, you can shorten it to #000. Same goes for #FFFFFF (#FFF ), which is white, and also #AA6622 (#A62 ), which is some creepy orange-brown if you must know. You cannot use it on a hex value like #A26BDF , a quirky purple.

RGB and RGBA
RGB stands for the color channels Red Green Blue. The intensity of the colors is being defined by values ranging from 0 to 255, or percentages ranging from 0% to 100%. Example, both putting out the same bright red:

background-color: rgb(255, 0, 0);
background-color: rgb(100%, 0%, 0%);

RGBA adds to RGB with a fourth channel, the alpha channel. This is not a color channel; the value defines the opacity of your chosen color, 0.0 translating as full transparency and 1.0 translating as full visibility. So, 0.5 would be 50% visbility.

background-color: rgba(255, 0, 0, 1.0);

There are also HSL (Hue Saturation Lightness) and HSLA (Hue Saturation Lightness Alpha), but they are not supported (yet?), so I won't delve into it.

1.2 background-image
The art to put a custom image into your skin. Now, mind you, "background" is a bit misleading as a term here. You're not using this property solely to code in actual backgrounds, but also all the rest of your custom images you want properly defined or customized and not in the journal body via HTML code. That said, getting an image into your skin is as easy as being too lazy to come up with a funny analogy. It's the formatting that may or may not make you bite into your keyboard. But more on formatting later. First off, example code minus formatting:

.image {background-image: url('IMGURL');}

1.3 background-repeat
You may have an image that needs repeating, like a tiled texture. Or an image that doesn't need repeating. Either way, as you will have gleaned from the property name, this is the way to do it. There are five possible repeat values:

no-repeat: The image won't be repeated.
repeat-x: The image will be repeated along the x-axis, aka horizontally, like: left to right.
repeat-y: The image will be repeated along the y-axis, aka vertically, like: top to bottom.
repeat: The image will be repeated on both axes.
inherit: The image will repeat or not depending on the settings of the parent element.

Example:

.image {
background-image: url('IMGURL');
background-repeat: no-repeat;}

1.4 background-position
One very subjective view of mine I want to share with you holds that this property is one of the most useful and effective properties in all the image formatting options (on dA, at least). Background-position is awesome for several reasons I will tell you about in a bit, but let's start with what it actually does. It specifies the position of your image. Yeah, you go ahead and roll your eyes at me, but you may want to stop for a moment to have a look at the values:

right top
left top
center top
right center
left center
right bottom
left bottom
center bottom
center center
Should you omit either of the two values it will always return center.

percentage
Two values, the first specifying the percental position on the x-axis, the second on the y-axis. 0% 0% by default. Should you omit either of the two values it will always return 50% (in other words: center). Keep in mind that these values are the percental equivalent of the list above. The default 0% 0% is top left, while 100% 100% is right bottom. Likewise, 50% 50% would be center center. The difference is that you have more control in positioning the image.

positions
A lot like percentage. Actually, exactly like it as there is no CSS unit specified for use with these values. px, %, cm, mm, in, pc... You can also mix positions and percentages. As is usually the case, the first value is X, the second value is Y, X being horizontal, Y being vertical.

inherit
The position will depend on the settings of the parent element.

Example for further reference:

.image {
background-image: url('IMGURL');
background-repeat: no-repeat;
background-position: 100% 20px;}

So, you see, background-position helps you a great deal in moving an image around. But the usefullness does not end here, in fact, it only just started.

Moving an image inside its own boundaries
Let's say you - stop thinking why the heck you'd ever want to do that - you have an image, and you want that image to change to another image on mouse over. Logic dictates that you'll need two different images: the regular image, and the on-hover image. The code would look something like this:

.regularimage {
background-image: url('regularimage.jpg');
background-repeat: no-repeat;
width: image-width-in-px;
height: image-height-in-px;}

.regularimage:hover {
background-image: url('hoverimage.jpg');
background-repeat: no-repeat;
width: image-width-in-px;
height: image-height-in-px;}

And yes, that would very much work. Although on loading the page only the regular image would be loaded, not the hover image, which would only then be loaded when the visitor hovers his cursor over it. A small file size will act to your advantage; you may be lucky. But there is the possibility that the visitor hovers his cursor over the regular image, and the image vanishes to reveal background while the hover image loads and then pops up. The loading process can take up the smallest amount of time, but it will be seen, and it will be ugly.

What to do about it?

Simple. Two images, one file. By placing the hover image into the same file as the regular image, they will be loaded simoultaneously. No loading time inbetween mouse over and hover image appearance. To better illustrate my point I've made two simple buttons and saved them in one file:

Now to the CSS code. The image width will be 173px - because that's the width of the buttons - and the height will be enough to show one of the buttons. One button is 30px, so the height is going to be 30px. The code for the regular button will look like this:

.button {
background-image: url('IMGURL');
background-repeat: no-repeat;
background-position: 0 0;
width: 173px;
height: 30px;}

Making for this:

As you can see I didn't change the default background-position values. 0 0, after all, is top left. The CSS code for the hover button will look somewhat like this:

.button:hover {
background-image: url('IMGURL');
background-repeat: no-repeat;
background-position: center bottom;
width: 173px;
height: 30px;}

Now hover over this:

Same file, different image. Might come in handy. Stacking up images in one file - for optimization purposes, for positioning purposes, for in-boundary positioning purposes, for all of those purposes, and any other purpose you can think of.

1.5 background-attachment
This one has three values, and since the most common variant also happens to be the default, background-attachment is not often used. The three values are:

scroll
This is the default value. The image scrolls with the element, meaning that it has a place inside your journal skin (or design of whatever kind) and it will stay put when you scroll down the page.

local
The image does move on scroll in regards to the element's contents.

fixed
The image is fixed and moves with your scrolling; not with a specific element or content, but the viewpoint. As soon as the image hits the upper part of the page, it will follow you down, and when you scroll up, it will follow you up again. This comes in handy when you have a dynamic design and an intricate background. Despite the fact that the design can be prolonged as far as one wishes, the background image will always follow.

.image {
background-image: url('IMGURL');
background-attachment: fixed;}

1.6 Shorthand Form
What is a shorthand form, you ask? Well, a shorthand strives to shorten the properties by compressing all of them into one. In the background's case, an image taking advantage of every property would look like this:

.image { background: transparent1 url('IMGURL')2 no-repeat3 scroll4 center top5;}

1 background-color
2 background-image
3 background-repeat
4 background-attachment
5 background-position

In that order. It does not matter if one is missing, as long as the order is kept.

Stay strong! Stay CSS.
Celvas