Backgrounds; images and image effects
Backgrounds
On elements like tables and sections with text, even the BODY tag, where you have a content making it possible to see the background, you can control the looks of the background. For showing background images you have a plethora of options for both placement and how they move relative to the page when you scroll (e.g. the effect called parallax effect), to give a page some character.
Images
Simple images in the background is done using the style background-image: url() e.g.
which looks like this:
As seen, the default for background-image is to fill the entire background with the image by repeating it. That can be changed. You can also have multiple image in layers. In that case, you separate the paths and filenames using comma. Here you should be aware that Internet Explorer 8 and earlier versions does not support this. But if we try two images:
which looks like this:
As seen, having animations in the background is no problem either.
If you want something other than the image being repeated all over the visible surface, you can control this as well. For this, you have the following parameters:
background-repeat
background-repeat is the variable where you specify whether the image is shown once or repeatedly, and how. For background-repeat you have the following values:
Examples will be shown further down in connection with other parameters.
background-origin
background-origin is one of the two options for specifying placement of the background image. background-origin is mostly relevant in regards to the edges of the element, if you need placement in regards to the element area, background-position is the way to go. For background-origin you have the following options:
It can be very difficult to see the differences, especially for padding-box and border-box, but here is an example for each type, using a dashed border, 10px wide, so you can see the difference:
Med STYLE="background-origin:padding-box"
Med STYLE="background-origin:border-box"
Med STYLE="background-origin:content-box"
Do be aware that when using background with repeat of some kind, the placement is the placement of the first FULL background image, so you avoid something like this, where content-box is filled out to the left side of the entire image with a partial, instead of having a free space all the way around as you would when using e.g. background-repeat:repeat-x:
background-position
If you want your background image placed somewhere specific in the element's background, you use background-position. Using background-position mostly makes sense when showing the image once, in one row/column. For background-position you have the following variables:
So, looking at our example from before, if we want the background image placed in the upper right corner, so it isn't interfering with the content, we use background-position:right top:
If you have multiple images, background-position also allows multiple placements. In that case, they are separated by comma. Here we have two images placed using background-position:right top, center top:
If you don't specify images for thr specified positions, no image is shown, so you cannot show the same image at two positions by specifying the image only once. You have to write it twice, separated by comma as with two different images.
background-attachment
background-attachment specifies how the background image is fixed, i.e. if it moves when scrolling or not, and if so, which part of the page does it follow. For background-attachment you have the following values:
Scroll is the type shown on the other backgrounds. No reason to repeat this.
If we start with fixed, this should be used with some care. Where scroll and local place the background image relative to the element, fixed places the background image relative to the viewport, i.e. the opened tab. This means that e.g. background-position: left center is no longer the left margin of the element but all the way out at the tab's left margin. If we take a look at Stars and Stripes placed with background-attachment:fixed and background-position:center center it looks like this:
Stars and Stripes on fixed background-attachment.
This is also known as parallax scrolling.
If you use background-attachment:local the background is fixed relative to the element. Here we have a DIV, where the content, in this case The star-spangled Banner, is bigger than the background image and the size of the element. When scrolling, the background image follows the text, where the background image for background-attachment:scroll would stay in place, and only the text would scroll. The effect of background-attachment:local looks like this:
background-size
background-size scales the background image, as the name suggests, just like scaling of images when using the IMG tag. For background-size you have the following values:
background-blend-mode
background-blend-mode is a relatively new feature, making it possible to mix background colors with background images. You can get some rather interesting effects using background-blend-mode, but as it isn't supported by all browsers, e.g. Internet Explorer and Edge, it isn't an effect you should start using until Internet Explorer has been phased out and Edge supports the function.
background-blend-mode can have the following values:
When the technology is sufficiently matured, and all browsers support it, it will be demonstrated in details. Until then, it is only necessary to know what it is, and why you shouldn't use it (yet).
<DIV STYLE="background-image:url(../Graphics/Humphrey_Thumb.png)"> </DIV>
which looks like this:
As seen, the default for background-image is to fill the entire background with the image by repeating it. That can be changed. You can also have multiple image in layers. In that case, you separate the paths and filenames using comma. Here you should be aware that Internet Explorer 8 and earlier versions does not support this. But if we try two images:
<DIV STYLE="background-image:url(../Graphics/Humphrey_Thumb.png),url(../Graphics/ComputerWork.gif)"> </DIV>
which looks like this:
As seen, having animations in the background is no problem either.
If you want something other than the image being repeated all over the visible surface, you can control this as well. For this, you have the following parameters:
- background-repeat
- background-origin
- background-position
- background-size
background-repeat
background-repeat is the variable where you specify whether the image is shown once or repeatedly, and how. For background-repeat you have the following values:
| Value | Effect |
| repeat | Default value. The image is repeated in both with and height |
| repeat_x | Here the image is only repeated horizontally |
| repeat_y | Here the image is only repeated vertically |
| no-repeat | Here the image is only shown once |
| initial | Uses the default value |
| inherit | The the value is inherited from the parent element |
Examples will be shown further down in connection with other parameters.
background-origin
background-origin is one of the two options for specifying placement of the background image. background-origin is mostly relevant in regards to the edges of the element, if you need placement in regards to the element area, background-position is the way to go. For background-origin you have the following options:
| Value | Effect |
| padding-box | Default value. The background image starts in the upper left corner of the padding edge. |
| border-box | The background image starts in the upper left corner of the border. |
| content-box | The background image starts in the upper left corner of the content. |
| initial | Uses the default value |
| inherit | The the value is inherited from the parent element |
It can be very difficult to see the differences, especially for padding-box and border-box, but here is an example for each type, using a dashed border, 10px wide, so you can see the difference:
Med STYLE="background-origin:padding-box"
'Hullo, Mole!' said the Water Rat.
'Hullo, Rat!' said the Mole.
'Would you like to come over?' enquired the Rat presently.
'Oh, its all very well to TALK,' said the Mole, rather pettishly, he being new to a river and riverside life and its ways.
The Rat said nothing, but stooped and unfastened a rope and hauled on it; then lightly stepped into a little boat which the Mole had not observed. It was painted blue outside and white within, and was just the size for two animals; and the Mole's whole heart went out to it at once, even though he did not yet fully understand its uses.
'Hullo, Rat!' said the Mole.
'Would you like to come over?' enquired the Rat presently.
'Oh, its all very well to TALK,' said the Mole, rather pettishly, he being new to a river and riverside life and its ways.
The Rat said nothing, but stooped and unfastened a rope and hauled on it; then lightly stepped into a little boat which the Mole had not observed. It was painted blue outside and white within, and was just the size for two animals; and the Mole's whole heart went out to it at once, even though he did not yet fully understand its uses.
Med STYLE="background-origin:border-box"
'Hullo, Mole!' said the Water Rat.
'Hullo, Rat!' said the Mole.
'Would you like to come over?' enquired the Rat presently.
'Oh, its all very well to TALK,' said the Mole, rather pettishly, he being new to a river and riverside life and its ways.
The Rat said nothing, but stooped and unfastened a rope and hauled on it; then lightly stepped into a little boat which the Mole had not observed. It was painted blue outside and white within, and was just the size for two animals; and the Mole's whole heart went out to it at once, even though he did not yet fully understand its uses.
'Hullo, Rat!' said the Mole.
'Would you like to come over?' enquired the Rat presently.
'Oh, its all very well to TALK,' said the Mole, rather pettishly, he being new to a river and riverside life and its ways.
The Rat said nothing, but stooped and unfastened a rope and hauled on it; then lightly stepped into a little boat which the Mole had not observed. It was painted blue outside and white within, and was just the size for two animals; and the Mole's whole heart went out to it at once, even though he did not yet fully understand its uses.
Med STYLE="background-origin:content-box"
'Hullo, Mole!' said the Water Rat.
'Hullo, Rat!' said the Mole.
'Would you like to come over?' enquired the Rat presently.
'Oh, its all very well to TALK,' said the Mole, rather pettishly, he being new to a river and riverside life and its ways.
The Rat said nothing, but stooped and unfastened a rope and hauled on it; then lightly stepped into a little boat which the Mole had not observed. It was painted blue outside and white within, and was just the size for two animals; and the Mole's whole heart went out to it at once, even though he did not yet fully understand its uses.
'Hullo, Rat!' said the Mole.
'Would you like to come over?' enquired the Rat presently.
'Oh, its all very well to TALK,' said the Mole, rather pettishly, he being new to a river and riverside life and its ways.
The Rat said nothing, but stooped and unfastened a rope and hauled on it; then lightly stepped into a little boat which the Mole had not observed. It was painted blue outside and white within, and was just the size for two animals; and the Mole's whole heart went out to it at once, even though he did not yet fully understand its uses.
Do be aware that when using background with repeat of some kind, the placement is the placement of the first FULL background image, so you avoid something like this, where content-box is filled out to the left side of the entire image with a partial, instead of having a free space all the way around as you would when using e.g. background-repeat:repeat-x:
'Hullo, Mole!' said the Water Rat.
'Hullo, Rat!' said the Mole.
'Would you like to come over?' enquired the Rat presently.
'Oh, its all very well to TALK,' said the Mole, rather pettishly, he being new to a river and riverside life and its ways.
The Rat said nothing, but stooped and unfastened a rope and hauled on it; then lightly stepped into a little boat which the Mole had not observed. It was painted blue outside and white within, and was just the size for two animals; and the Mole's whole heart went out to it at once, even though he did not yet fully understand its uses.
'Hullo, Rat!' said the Mole.
'Would you like to come over?' enquired the Rat presently.
'Oh, its all very well to TALK,' said the Mole, rather pettishly, he being new to a river and riverside life and its ways.
The Rat said nothing, but stooped and unfastened a rope and hauled on it; then lightly stepped into a little boat which the Mole had not observed. It was painted blue outside and white within, and was just the size for two animals; and the Mole's whole heart went out to it at once, even though he did not yet fully understand its uses.
background-position
If you want your background image placed somewhere specific in the element's background, you use background-position. Using background-position mostly makes sense when showing the image once, in one row/column. For background-position you have the following variables:
| Value | Effect |
| left top left center left bottom right top right center right bottom center top center center center bottom | Relative placement to the element surface. If you only specify one part of the value, the other one is automatically set to 'center'. |
| x% y% | The background image's distance from the upper left corner in percent. If you only specify one value, this is considered the x% and y% will be set to 50%. |
| xpos ypos | The background image's distance from the upper left corner in a fixed distance, e.g. px or cm. If you only specify one value, this is considered the xpos and ypos will be set to 50%. With this variable you can combine relative and absolute distances, e.g. px and percents. |
| initial | Uses the default value |
| inherit | The value is inherited from the parent element |
So, looking at our example from before, if we want the background image placed in the upper right corner, so it isn't interfering with the content, we use background-position:right top:
'Hullo, Mole!' said the Water Rat.
'Hullo, Rat!' said the Mole.
'Would you like to come over?' enquired the Rat presently.
'Oh, its all very well to TALK,' said the Mole, rather pettishly, he being new to a river and riverside life and its ways.
The Rat said nothing, but stooped and unfastened a rope and hauled on it; then lightly stepped into a little boat which the Mole had not observed. It was painted blue outside and white within, and was just the size for two animals; and the Mole's whole heart went out to it at once, even though he did not yet fully understand its uses.
'Hullo, Rat!' said the Mole.
'Would you like to come over?' enquired the Rat presently.
'Oh, its all very well to TALK,' said the Mole, rather pettishly, he being new to a river and riverside life and its ways.
The Rat said nothing, but stooped and unfastened a rope and hauled on it; then lightly stepped into a little boat which the Mole had not observed. It was painted blue outside and white within, and was just the size for two animals; and the Mole's whole heart went out to it at once, even though he did not yet fully understand its uses.
If you have multiple images, background-position also allows multiple placements. In that case, they are separated by comma. Here we have two images placed using background-position:right top, center top:
'Hullo, Mole!' said the Water Rat.
'Hullo, Rat!' said the Mole.
'Would you like to come over?' enquired the Rat presently.
'Oh, its all very well to TALK,' said the Mole, rather pettishly, he being new to a river and riverside life and its ways.
The Rat said nothing, but stooped and unfastened a rope and hauled on it; then lightly stepped into a little boat which the Mole had not observed. It was painted blue outside and white within, and was just the size for two animals; and the Mole's whole heart went out to it at once, even though he did not yet fully understand its uses.
'Hullo, Rat!' said the Mole.
'Would you like to come over?' enquired the Rat presently.
'Oh, its all very well to TALK,' said the Mole, rather pettishly, he being new to a river and riverside life and its ways.
The Rat said nothing, but stooped and unfastened a rope and hauled on it; then lightly stepped into a little boat which the Mole had not observed. It was painted blue outside and white within, and was just the size for two animals; and the Mole's whole heart went out to it at once, even though he did not yet fully understand its uses.
If you don't specify images for thr specified positions, no image is shown, so you cannot show the same image at two positions by specifying the image only once. You have to write it twice, separated by comma as with two different images.
background-attachment
background-attachment specifies how the background image is fixed, i.e. if it moves when scrolling or not, and if so, which part of the page does it follow. For background-attachment you have the following values:
| Value | Effect |
| scroll | The background scrolls with the element. This is default. |
| fixed | The background is fixed, relatively to the viewport, i.e. the window. |
| local | The background scrolls with the content of element. |
| initial | Uses the default value |
| inherit | The value is inherited from the parent element |
Scroll is the type shown on the other backgrounds. No reason to repeat this.
If we start with fixed, this should be used with some care. Where scroll and local place the background image relative to the element, fixed places the background image relative to the viewport, i.e. the opened tab. This means that e.g. background-position: left center is no longer the left margin of the element but all the way out at the tab's left margin. If we take a look at Stars and Stripes placed with background-attachment:fixed and background-position:center center it looks like this:
Stars and Stripes on fixed background-attachment.
This is also known as parallax scrolling.
If you use background-attachment:local the background is fixed relative to the element. Here we have a DIV, where the content, in this case The star-spangled Banner, is bigger than the background image and the size of the element. When scrolling, the background image follows the text, where the background image for background-attachment:scroll would stay in place, and only the text would scroll. The effect of background-attachment:local looks like this:
Oh, say can you see by the dawn’s early light
What so proudly we hailed at the twilight’s last gleaming?
Whose broad stripes and bright stars thru the perilous fight,
O’er the ramparts we watched were so gallantly streaming?
And the rocket’s red glare, the bombs bursting in air,
Gave proof through the night that our flag was still there.
Oh, say does that star-spangled banner yet wave
O’er the land of the free and the home of the brave?
On the shore, dimly seen through the mists of the deep,
Where the foe’s haughty host in dread silence reposes,
What is that which the breeze, o’er the towering steep,
As it fitfully blows, half conceals, half discloses?
Now it catches the gleam of the morning’s first beam,
In full glory reflected now shines in the stream:
‘Tis the star-spangled banner! Oh long may it wave
O’er the land of the free and the home of the brave!
And where is that band who so vauntingly swore
That the havoc of war and the battle’s confusion,
A home and a country should leave us no more!
Their blood has washed out their foul footsteps’ pollution.
No refuge could save the hireling and slave
From the terror of flight, or the gloom of the grave:
And the star-spangled banner in triumph doth wave
O’er the land of the free and the home of the brave!
Oh! thus be it ever, when freemen shall stand
Between their loved home and the war’s desolation!
Blest with victory and peace, may the heav’n rescued land
Praise the Power that hath made and preserved us a nation.
Then conquer we must, when our cause it is just,
And this be our motto: “In God is our trust.”
And the star-spangled banner in triumph shall wave
O’er the land of the free and the home of the brave!
What so proudly we hailed at the twilight’s last gleaming?
Whose broad stripes and bright stars thru the perilous fight,
O’er the ramparts we watched were so gallantly streaming?
And the rocket’s red glare, the bombs bursting in air,
Gave proof through the night that our flag was still there.
Oh, say does that star-spangled banner yet wave
O’er the land of the free and the home of the brave?
On the shore, dimly seen through the mists of the deep,
Where the foe’s haughty host in dread silence reposes,
What is that which the breeze, o’er the towering steep,
As it fitfully blows, half conceals, half discloses?
Now it catches the gleam of the morning’s first beam,
In full glory reflected now shines in the stream:
‘Tis the star-spangled banner! Oh long may it wave
O’er the land of the free and the home of the brave!
And where is that band who so vauntingly swore
That the havoc of war and the battle’s confusion,
A home and a country should leave us no more!
Their blood has washed out their foul footsteps’ pollution.
No refuge could save the hireling and slave
From the terror of flight, or the gloom of the grave:
And the star-spangled banner in triumph doth wave
O’er the land of the free and the home of the brave!
Oh! thus be it ever, when freemen shall stand
Between their loved home and the war’s desolation!
Blest with victory and peace, may the heav’n rescued land
Praise the Power that hath made and preserved us a nation.
Then conquer we must, when our cause it is just,
And this be our motto: “In God is our trust.”
And the star-spangled banner in triumph shall wave
O’er the land of the free and the home of the brave!
background-size
background-size scales the background image, as the name suggests, just like scaling of images when using the IMG tag. For background-size you have the following values:
| Value | Effect |
| auto | The background image retains height and width. This is default. |
| length | Specifies width and height for the background image in absolute values (px, cm, etc.). First value is width, second value is height. If only one value is specified, the height is scaled proportionally. |
| percentage | Specifies width and height for the background image in percents of the original size. First value is width, second value is height. If only one value is specified, this is used for both width and height. |
| cover | Scales the background image so it becomes as big as necessary to cover the entire background. The image's proportions are retained, so parts of the image may be outside the visible part of the element. |
| contain | Scales the background image so it becomes as big as possible within the element's area while retaining its proportions. |
| initial | Uses the default value |
| inherit | The value is inherited from the parent element |
background-blend-mode
background-blend-mode is a relatively new feature, making it possible to mix background colors with background images. You can get some rather interesting effects using background-blend-mode, but as it isn't supported by all browsers, e.g. Internet Explorer and Edge, it isn't an effect you should start using until Internet Explorer has been phased out and Edge supports the function.
background-blend-mode can have the following values:
| Value | Effect |
| normal | Setting blending mode to normal. This is default. |
| multiply | Setting blending mode to multiply. |
| screen | Setting blending mode to screen. |
| overlay | Setting blending mode to overlay. |
| darken | Setting blending mode to darken. |
| lighten | Setting blending mode to lighten |
| color-dodge | Setting blending mode to color-dodge |
| saturation | Setting blending mode to saturation |
| color | Setting blending mode to color |
| luminosity | Setting blending mode to luminosity |
When the technology is sufficiently matured, and all browsers support it, it will be demonstrated in details. Until then, it is only necessary to know what it is, and why you shouldn't use it (yet).
Transparency/opacity
You cannot specify transparency/opacity specifically for background images. If you use the style called opacity, it will apply for the entire element, including the background image, i.e. text and any other content will become transparent as well. There is a workaround for this, however, as you can use file formats allowing transparency, e.g. the png format, and use a transparent image as background.