CSS Properties 6 – Color and Background

AD

It took a while due to my exams, but your patience will be rewarded – the final part of our CSS guide is here! I certainly hope that the final piece of the puzzle will be as useful as the previous parts and it will once again greatly enhance your CSS knowledge.

Today we’ll learn all the basic codes related to colors and background settings in CSS. Let’s get on with it, shall we?

If you haven’t studied the previous four articles of this series, here are the links:

 

<style type="text/css">
h1 {text-align:center; color:#ccc;}
p {color:red; text-decoation:underline;}
</style>
<h1>Designzzz</h1>
<p>This is a test code</p>

Now let’s begin this article.

Tips and Tricks

 

Basic sum of properties:

  • Color
  • Background Color
  • Background Image
  • Background Repeat
  • Background Attachment
  • Background Position
  • Background

Color

Syntax

color:

Possible Values

Each color has a special HTML code. In general, it is “#” accompanied by six symbols, such as #CC0000 stands for red. One of the best tools I’d recommend for getting these codes and not wasting a lot of time on it is the famous and hundred times repeated Firefox Plugin Colorzilla – but just in case you don’t use Firefox, follow this link and bookmark the table of colors and their codes.

Example

h4 {color: #EAF2FA} - would make Heading 4 Cyan.

Colors are one of the most important factors when you’re designing a website. I strongly recommend to become acquainted with one of the tools I provided, because we often need to change colors a lot and the faster you can get the color code the better.

Background Color

Syntax

background-color:

Possible values

  • color code
  • transparent

In case you don’t know exactly what effect will Background Color have, let me help you with an example – I’m sure most of you know Microsoft Word, Excel or their Open Office alternatives. Well, whenever you hit the color can and highlight a word / a cell with a color, you’re in fact working with Background Color.

Example

Let’s have an H2 with default black color. We will now clearly demonstrate the difference between “color” and “background color”:

h2 {color: #4800FF}
h2 {background-color: #4800FF}

Background Image

Syntax

background-image:

Possible values

  • URL ()
  • none

The most common application would be when you want to set an image (say, your logo) under your Menu, Body or perhaps Single Post. Background Image is closely related to Background Repeat which will be covered directly below.

Example:

.header {background-image: url (http://mostpopularbooks.org/wp-content/uploads/2011/04/The-Fall-of-the-House-of-Usher.png) }

Background Repeat

Syntax

background-repeat:

Possible Values

  • repeat
  • no-repeat
  • repeat-x
  • repeat-y

As the name suggests, you are able to determine in which direction your image will be repeated. X and Y are taken from the standard Cartesian coordinate system, i.e. X is horizontal and Y is vertical.

The basic value is set to “repeat”, so in case you want to display your image only once, you need to use this property and set it to “no-repeat”.

Example

.header {background-image: url (http://mostpopularbooks.org/wp-content/uploads/2011/04/The-Fall-of-the-House-of-Usher.png; background-repeat: no-repeat; }

Background Attachment

Syntax

background-attachment:

Possible values

  • scroll
  • fixed

What does this property do? Well, most of the websites are too big to fit just one screen and you need to scroll in order to view the entire content. Background Attachment determines whether the image will move as well or stay fixed in its original position.

Example:

header {background: attachment: scroll}

Note: you actually do not need to set this, because scroll is the basic value. Use this property solely for fixing your background image.

Background Position

Syntax

background-position:

Possible Values

  • percentage / length
  • top / center / bottom
  • left / center / right

This property can be used either for block-level elements or replaced elements (in HTML, that would include img, input, text area, select, object). Again, as the name suggests, it will position your image in a particular area of the screen.

You can also use numbers or words to determine location. Word values are much more recommended due to their identical (or at least very similar) placement in multiple resolutions, browsers et cetera. In fact, I would so strongly recommend to stay away from absolute values that I will not cover it in this tutorial.

Another side note is that in case you use the “background-attachment: fixed” element, the image position will be placed related to the canvas, not the element which would be usually used for the default position.

Example:

.header {background-image: url (http://mostpopularbooks.org/wp-content/uploads/2011/04/The-Fall-of-the-House-of-Usher.png);

background-repeat: no-repeat; background-position: top; }

Background

Syntax

background:

Possible Values

This is exactly the same type of property as Font; say you want to modify all (or most of the) background properties. Instead of cluttering your code with many elements, you’ll just use this one zenithal property.

Moreover, the fact is this property is overall better supported than its individual parameters.

Example

body {background-color: #C9C5C5; background-image: url (http://bit.ly/ArticleTest); background-repeat: repeat-x; background-position: center}

It can be Minified Like this:

body {background:url (http://bit.ly/ArticleTest) repeat-x center #C9C5C5; }

Conclusion

And that’s it. Our journey across the CSS realm took nearly seven weeks and even though we will be returning home with sadness in our hearts, there will also be joy thanks to our new vast knowledge of web designing.

And since I’m really bad in pretending that I’m a poet, I will now sincerely thank your for all your visits, all your attention and the time you spent on my CSS articles here on DesignZZZ. Although this series is over, I will be back with something new, I promise.

Thank you for reading!

create free website wix below post

Further Related Readings

Copyrights © 2016 - Designzzz. All Rights Reserved