CSS Backgrounds
 |
| You can use CSS to add any type of background to a web page or web element |
In this tutorial we will learn how to apply background colours to your website and parts of your website. We will also look at advanced methods to position and control background images. The following CSS properties will be explained, (note the American spelling of color and not colour is used in these codes).
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
- background
- gradient backgrounds
background-color
The color property describes the foreground colour of an element. For example, imagine that we want all headlines in a document to be red. The headlines are all marked with the HTML element <h1>. The code below sets the colour of <h1> elements to red.Colours can be entered as hexadecimal values as in the example above (#ff0000), or you can use the names of the colours ("red") or (Red, Green, Blue) RGB-values (rgb(255,0,0)).
The background-color property describes the background colour of elements. The element <body> contains all the content of a HTML document so if we want to change the background colour of an entire page, the 'background-color' property should be applied to the <body> element. Note how the two words background and color are joined with a hyphen, this is the case with all CSS properties that are made up of two or three words, they must always be joined with a hyphen.
You can also apply background colours to other elements including headlines and text. In the examples below, different background colours are applied to <body> and <h1> elements.
Notice that we applied two properties to <h1> by dividing them by a semicolon. Just like with HTML, where we could add multiple attributes, we can also add multiple properties in CSS.
background-image
The CSS property background-image is used to insert a background image. To insert an image as a background image for a web page, simply apply the background-image property to <body> and specify the location of the image.
Notice how we specified the location of the image as url("images/sample.gif"). This means that the image is located in a subfolder called images. You can also refer to images on the Internet indicating the full address of the file: url("http://www.onlinedesignteacher.com/images/css.gif").
For example, to avoid repetition of a background image the code should look like this:
background-repeat
If you tried out the example code above, you would have noticed that by your image was automatically repeated both horizontally and vertically to cover the entire screen? The property background-repeat controls this default setting. Below the four different values for background-repeat are explained.- {background-repeat: repeat-x;} - The image is repeated horizontally
- {background-repeat: repeat-y} - The image is repeated vertically
- {background-repeat: repeat} - The image is repeated both horizontally and vertically
- {background-repeat: no-repeat} - The image is not repeated
For example, to avoid repetition of a background image the code should look like this:
background-attachment
The property background-attachment specifies whether a background picture is fixed or scrolls along with the containing element. A fixed background image will not move with the text when a reader is scrolling the page, whereas an unlocked background image will scroll along with the text of the web page. Below the two different values for background-attachment are explained.- {Background-attachment: scroll;} - The image scrolls with the page - unlocked
- {Background-attachment: fixed;} - The image is locked
For example, the code below will fix the background image.
As you can see from testing these codes out, a background image will automatically be positioned in the top left corner of the screen. The property background-position allows you to change this setting and position the background image anywhere you like on the screen. There are different ways to set the values of background-position.
For example, the value '100px 200px' positions the background image 100px from the left side and 200px from the top of the browser window. The position can also be indicated as percentages of the width of the screen, fixed units such as pixels, centimetres, etc. or you can use the words top, bottom, center (not the American spelling), left and right. The image below, from www.html.net, shows how it works.
For example the code below positions the background image in the top right corner:
For example, look at these five lines:
Using background the same result can be achieved in just one line of code:
The computer is able to recognise what property is needed based on the type of value that is used. For example #cccccc is obviously for background-color, just be sure to keep a space between each value you enter, no semi colon is needed until the last value is entered. So to apply this code to the body of a HTML page the code would be...
NOTE: If a property is left out, it will simply be set to its default value.
The example below is for a top to bottom gradient from black to white on an element with the id 'linearbg', see the result below the code.
background-position
As you can see from testing these codes out, a background image will automatically be positioned in the top left corner of the screen. The property background-position allows you to change this setting and position the background image anywhere you like on the screen. There are different ways to set the values of background-position.
For example, the value '100px 200px' positions the background image 100px from the left side and 200px from the top of the browser window. The position can also be indicated as percentages of the width of the screen, fixed units such as pixels, centimetres, etc. or you can use the words top, bottom, center (not the American spelling), left and right. The image below, from www.html.net, shows how it works.
For example the code below positions the background image in the top right corner:
Shorthand CSS (background)
So far we have used many different properties related to the background of an element. In order to make things easier, and our code shorter we can compile the code using the property background which is short hand for all the properties listed so far. With background you can compress several properties and thereby write your style sheet in a shorter way which makes it easier to read.For example, look at these five lines:
The computer is able to recognise what property is needed based on the type of value that is used. For example #cccccc is obviously for background-color, just be sure to keep a space between each value you enter, no semi colon is needed until the last value is entered. So to apply this code to the body of a HTML page the code would be...
NOTE: If a property is left out, it will simply be set to its default value.
CSS Gradient Background:
The background attribute is also used to create gradient backgrounds. Unfortunately as gradient backgrounds are a relatively new addition to CSS they require slightly different code for each browser type to ensure they are fully cross browser compatible, and even then it is recommended to include a fall-back of a standard background colour as older browsers will not render the gradients.The example below is for a top to bottom gradient from black to white on an element with the id 'linearbg', see the result below the code.
CSS Backgrounds
Reviewed by Opus Web Design
on
March 22, 2016
Rating:
Reviewed by Opus Web Design
on
March 22, 2016
Rating:
