Sunday, August 21, 2011

CSS3 Tutorial 4: Adding a Background

In HTML5 you use CSS to set a background color or image because the tag for this in HTML is no longer supported.

Background Color
To set a background color you simply use the property background-color in the element body like so:
body {
background-color:#000000;
}
It's good form to use Hex color codes to define the color, #000000 would make the background color Black, a list of the most commonly used colors can be found here. A demo of this example can be found here.

Background Image
There are multiple ways to set a Background Image to be repeated; It can be repeated Horizontally, Vertically, In a Set position, Or no repeat at all.

This is the basic code to include a Background image.
body{
background-image:url('img.jpg');
}
For this image to be repeated Horizontally you would add "background-repeat:repeat-x;", It would look like this:
body{
background-img:url('img.jpg');
background-repeat:repeat-x;
}
For no repeat at all the code would be "background-repeat:no-repeat;" and would look like this:
body{
background-img:url('img.jpg');
background-repeat:no-repeat;
}
To make it so it doesn't repeat at all and is fixed in one place you would add "background-position:[position];" to the above code, Here's and example with the image being displayed in the right top.
body{
background-img:url('img.jpg');
background-repeat:no-repeat;
background-position:right top;
}

11 comments:

  1. So awesome! :D I'm going to do this right now.

    ReplyDelete
  2. this is great info man, easy and straight to the point

    ReplyDelete
  3. good, thanks for the tutorial =)

    ReplyDelete
  4. Should probably figure this out for my blog

    ReplyDelete
  5. soon enough ill be able to make my own awesum website:P another brilliant post, cheers

    ReplyDelete
  6. Nice! I appreciate ur work! great info! follow

    ReplyDelete
  7. Short and sweet and to the point.

    ReplyDelete
  8. Hopefully I will finally learn how to set my own damn blog right.

    ReplyDelete