CSS 101 | Part Ten - Backgrounds in CSS
Welcome to the CSS 101 series, Part Ten Backgrounds in CSS, where we cover how to place a background on an element. Before we continue onto more convoluted topics (such as columns and menus), I really felt I should demonstrate how to add backgrounds to things, as it is integral when it comes to the structure of a page. Your site would be very boring if nothing had a background colour or a background image! So, let us proceed.
The CSS background properties
background-color
background-color specifies the background colour of an element, in either a hexadecimal value, such as #000, a named colour, such as black or an RGB value, such as rgb(0,0,0).
CSS Code:
p.colourNameExample {
background-color:orange;
color:white; /* Added for example purposes. */
font-weight:bold; /* Added for example purposes. */
}
p.colourHexExample {
background-color:#ffa500;
color:white; /* Added for example purposes. */
font-weight:bold; /* Added for example purposes. */
}
p.colourRgbExample {
background-color:rgb(255,165,0);
color:white; /* Added for example purposes. */
font-weight:bold; /* Added for example purposes. */
}
(X)HTML Code:
<p class="colourNameExample">I have an orange background colour specified using the name of the colour.</p>
<p class="colourHexExample">I have a hexadecimal (hex for short) orange background colour.</p>
<p class="colourRgbExample">I have an rgb orange background colour.</p>
Result:
I have an orange background colour specified using the name of the colour.
I have a hexadecimal (hex for short) orange background colour.
I have an rgb orange background colour.
background-image
background-image specifies the URL to a background image. This can be a relative path, such as /images/image.jpg or an absolute path, such as www.mysite.com/images/image.jpg.
When using relative paths, the path to the image is relative to the directory containing your stylesheet. So, if your styles were in a folder called "styles" and your images were in a folder called "images", both within the the same directory, you would need to type ../images/image.jpg to access your images:
CSS Code:
p.imageExample {
background-image:url("../images/bg-image-test.jpg"); /* Using a relative path. */
}
p.imageExample {
background-image:url("www.mysite.com/images/bg-image-test.jpg"); /* Using an absolute path. */
}
Both of the above will produce the same result, but I personally use relative paths over absolute paths. This is mostly because the W3C use relative paths in their examples, everyone I know uses relative paths, and because relative paths put slightly less demand on a server, compared to absolute paths.
(X)HTML Code:
<p class="imageExample">I have an image as a background.</p>
Result:
I have an image as a background.
To remove a background image from an element, you set background-image to none.
CSS Code:
p.no_image {
background-image:none;
}
background-repeat
background-repeat specifies whether the background is repeated and in which direction. It takes the following values:
- inherit - have the background inherit its repeat property from a parent or ancestor element.
- no-repeat - don't repeat the background.
- repeat - repeat the background.
- repeat-x - repeat along the x-axis.
- repeat-y - repeat along the y-axis.
CSS Code:
p.noRepeatExample {
background-image:url("../images/bg-repeat-test.jpg");
background-repeat:no-repeat;
height:90px; /* Added for example purposes. */
border:1px solid black; /* Added for example purposes. */
font-weight:bold; /* Added for example purposes. */
}
p.repeatExample {
background-image:url("../images/bg-repeat-test.jpg");
background-repeat:repeat;
height:90px; /* Added for example purposes. */
border:1px solid black; /* Added for example purposes. */
font-weight:bold; /* Added for example purposes. */
}
p.repeatXExample {
background-image:url("../images/bg-repeat-test.jpg");
background-repeat:repeat-x;
height:90px; /* Added for example purposes. */
border:1px solid black; /* Added for example purposes. */
font-weight:bold; /* Added for example purposes. */
}
p.repeatYExample {
background-image:url("../images/bg-repeat-test.jpg");
background-repeat:repeat-y;
height:90px; /* Added for example purposes. */
border:1px solid black; /* Added for example purposes. */
font-weight:bold; /* Added for example purposes. */
}
(X)HTML Code:
<p class="noRepeatExample">This background is not repeated.</p>
<p class="repeatExample">This background is repeated.</p>
<p class="repeatXExample">This background is repeated along the x axis, i.e., the horizontal axis.</p>
<p class="repeatYExample">This background is repeated along the y axis, i.e., the vertical axis.</p>
Result:
This background is not repeated.
This background is repeated.
This background is repeated along the x axis, i.e., the horizontal axis.
This background is repeated along the y axis, i.e., the vertical axis.
When using background-repeat, you must specify an image, otherwise there will be nothing to repeat.
background-attachment
background-attachment is used to determine whether a background image scrolls with the page or is fixed in its position. It takes three properties:
- fixed - keep the background fixed in place so that it does not scroll with the page.
- inherit - have the background inherit its attachment property from a parent or ancestor element.
- scroll - have the background scroll with the page, and not stay in the same place when the page scrolls.
CSS Code:
div.fixedExample {
background-image:url("../images/bg-attach-test.jpg");
background-attachment:fixed;
}
div.scrollExample {
background-image:url("../images/bg-attach-test.jpg");
background-attachment:scroll;
}
Result:
Click here to view an example of a fixed background.
Click here to view an example of a scroll background.
The images in the examples are from the television show Spartacus: Blood and Sand, courtesy of the Starz television network.
background-position
background-position specifies the x and y coordinates for a background. It can take one or two percentage values, or one or two length values, which are top, right, bottom, left and center. The horizontal value is always supplied first, followed by the vertical value. background-position also takes the value inherit, which supplies whichever value is set for the background position on the parent element or an ancestor element. Let's look at an example.
CSS Code:
p.backgroundPositionExample1 {
background-image:url("../images/bg-position-test.jpg");
background-position:right top;
background-repeat:no-repeat; /* Added for example purposes. */
height:50px; /* Added for example purposes. */
border:1px solid black; /* Added for example purposes. */
}
This positions the background to the top of the screen and to the right.
p.backgroundPositionExample2 {
background-image:url("../images/bg-position-test.jpg");
background-position:100% 0%;
background-repeat:no-repeat; /* Added for example purposes. */
height:50px; /* Added for example purposes. */
border:1px solid black; /* Added for example purposes. */
}
This is the same as the above, but using percentages instead of length values. Here, the background's horizontal position is 100% (the far right of the screen) and its vertical position is 0% (the top of the screen).
p.backgroundPositionExample3 {
background-image:url("../images/bg-position-test.jpg");
background-position:bottom;
background-repeat:no-repeat; /* Added for example purposes. */
height:50px; /* Added for example purposes. */
border:1px solid black; /* Added for example purposes. */
}
This positions the background to the bottom and centre of the screen. When you don't specify a second value, it is assumed that the first value is the horizontal value and the vertical position of the background is center.
p.backgroundPositionExample4 {
background-image:url("../images/bg-position-test.jpg");
background-position:50% 50%;
background-repeat:no-repeat; /* Added for example purposes. */
height:50px; /* Added for example purposes. */
border:1px solid black; /* Added for example purposes. */
}
This sets the background's x and y coordinates to centre, thus centre aligning the image on the screen, both horizontaly and vertically.
p.backgroundPositionExample5 {
background-image:url("../images/bg-position-test.jpg");
background-position:center;
background-repeat:no-repeat; /* Added for example purposes. */
height:50px; /* Added for example purposes. */
border:1px solid black; /* Added for example purposes. */
}
This is the exact same as the statement above. It sets the background's x coordinate to center, and, as we're not specifying a vertical coordinate, the y value defaults to center or 50%.
(X)HTML Code:
<p class="backgroundPositionExample1">I am positioned at the top right of the screen.</p>
<p class="backgroundPositionExample2">I am positioned at the top right of the screen, but using percentages instead of length values.</p>
<p class="backgroundPositionExample3">I am positioned to the bottom and centre of the screen.</p>
<p class="backgroundPositionExample4">I am positioned in the centre of the screen, both horizontally and vertically.</p>
<p class="backgroundPositionExample5">I am positioned in the centre of the screen, both horizontally and vertically, but using one value, instead of two.</p>
Result:
I am positioned at the top right of the screen.
I am positioned at the top right of the screen, but using percentages instead of length values.
I am positioned to the bottom and centre of the screen.
I am positioned in the centre of the screen, both horizontally and vertically.
I am positioned in the centre of the screen, both horizontally and vertically, but using one value, instead of two.
The shorthand background property
The CSS background property will become a very intimate friend as you progress along your CSS journey, because it enables you to manipulate all of the properties mentioned above, in one declaration. For this reason, it is preferential to use background whenever you want to manipulate backgrounds, instead of writing out each (or several of) the statements mentioned above.
Here is how background is formed.
background: background-color background-url background-repeat background-attachment background-position;
And here are some examples.
CSS Code:
p.bgExample1
background:url('../images/mypic.jpg') no-repeat center;
height:80px; /* Added for example purposes. */
}
p.bgExample2
background:#ecd745 url("../images/bgshorthand.jpg") repeat-x bottom;
height:80px; /* Added for example purposes. */
}
(X)HTML Code:
<p class="bgExample1">I use less code to create my background.</p>
<p class="bgExample2">So do I!</p>
Result:
I use less code to create my background.
So do I!
In the first example, we're specifying a background image of ../images/mypic.jpg, setting it to not repeat and centring it along the x and y axes.
In the second example, we're specifying a background colour of #ecd745, an image of ../images/bgshorthand.jpg, and we're telling it to repeat along the x-axis and positioning it to the centre and bottom of the viewport. This is less apparent, as the background is tiling, but if we remove the background colour, you can more clearly see the position of the background image.
So do I!
As the image is repeated along the x-axis, the centre alignment isn't noticed at all, but the vertical alignment is.
Drop me a line
Got any questions? Get in touch via the contact form or email me @ helen@alternategateways.com.
