Skip to main content

CSS Backgrounds (Images and Colours)


Introduction:
This is the third part in my CSS Styling tutorials, in which I will be covering backgrounds.

Different Types of Backgrounds:
In CSS, you can choose to set the background equal to an image, this can either be a url or a local file directory path, or a colour.

Image Settings:
Here is an example of setting the background of a class named 'myDiv' to background.jpg...

  1. .myDiv {
  2. background: url('background.jpg');
  3. background-image: url('background.jpg');
  4. }

In the above example, the background.jpg file is located in the same directory folder as the page itself (the .css page, not the html page - unless it's inline or internal css styling). Here is how to go to the root directory and set the background image...

  1. .myDiv {
  2. background: url('../background.jpg');
  3. background-image: url('../background.jpg');
  4. }

Background Image Settings:
There are a few different background image settings, some of which are...

  1. background-size: 100% 100%; //width, height
  2. background-repeat: no-repeat; //repeat-y or repeat-x
  3. background-position: middle center; //horizontal, vertical

When Are Background Images Used?
Background images (and background colours) are normally used on div elements however they can be used on any element that shows up on the webpage. The elemnt in use is normally a block display.

Background Colours:
To set a simple background colour, all you do is this...

  1. background-color: #000000; //Colour code in hex value. 000000 is pure black.

Linking CSS To a HTML Element:
To link your CSS to an HTML element (text, div, etc.) you will need to decide whether you want to use a class or id, you will also need a unique name. Once you have those, go to your element in HTML and add...

  1. class='myClass'

... to the attributes of that element if you chose a class, or...

  1. id='myID'

if you chose an id.

Make sure you replace 'myClass' and/or 'myID' with your unique name. Then, in the CSS you will want to encase your properties with...

  1. .myClass {
  2. //Properties go here
  3. }

if you chose a class, or...

  1. #myID {
  2. //Properties go here
  3. }

(You can remove the line beginning with // if you wish).

Here's an example...

  1. <html>
  2. <head>
  3. <style>
  4. .img1 {
  5. background: url('img1.jpg');
  6. background-image: url('img1.jpg');
  7. background-size: 100%;
  8. color: blue;
  9. width: 300px;
  10. height: 100px;
  11. //Background of img1.jpg located in the same directory as this file. 100% (original) image size.
  12. }
  13.  
  14. .img2 {
  15. background: url('images/img2.png');
  16. background-image: url('images/img2.png');
  17. background-size: 100px 200px;
  18. background-position: middle;
  19. background-repeat: no-repeat;
  20. color: #fff;
  21. width: 300px;
  22. height: 100px;
  23. //Background of img2.png located the next directory of "images". The background has 100px width and 200px height. It is aligned to the middle of it''s container and won't repeat.
  24. }
  25.  
  26. .img3 {
  27. background: url('../img3.jpg');
  28. background-image: url('../img3.jpg');
  29. color: #000;
  30. width: 300px;
  31. height: 100px;
  32. //Background of img3.jpg located in the root directory of the server upload area.
  33. }
  34. </style>
  35. </head>
  36. <body>
  37. <div class='img1'>My first image</div>
  38. <div class='img2'>My second image</div>
  39. <div class='img3'>My third image</div>
  40. </body>
  41. </html>

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment

CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.