Introduction to Backgrounds
Adding a background to your page can be visually appealing, but only if placed properly.
A good web developer makes sure that the background goes along with the website's color scheme and that the image staying in-bounds with bandwidth limitations. Most importantly, the text overlay should have a good-enough contrast that allows readability.
In this section, we'll be discussing how to place image backgrounds, as well as how to apply styles and options to it.
Applying Backgrounds background-image, background-color, background-size
Background Color
You can specify a color for a background in case you want a basic color.
To do so, simply use the background-color
property with a color value.
#sample {
height: 5em;
width: 10em;
color: white;
background-color: purple;
border: 1px solid purple;
border-radius: 5px;
margin: 0 auto;
padding: 5px;
text-align: center;
}
Applying a Background Image
To specify a particular image, we use the background-image
value with an absolute or relative link to the image inside a url()
value.
Grabbing from within your own server
Here is an example of how to grab an image named paper-background.jpg that is located in the img folder within the root directory.
#sample {
background-image: url("/img/paper-background.jpg");
height: 4em;
width: 15em;
padding: 5px;
margin: 0 auto;
border-radius: 5px;
font-weight: bold;
text-align: center;
}
Grabbing from another server
We can also use a full address to grab it from another server.
background-image: url("https://imgur.com/path/here");
Background Size
In the previous example, we just placed the background, and set the width and height of its containing element.
To set size of the background image itself, we use the background-size property. The first value is the height, while the second is the width.
#sample {
background-size: 100px 20px;
}
Be sure that the dimensions are scaled properly. If they are not, this will distort (or stretch out) your image. To avoid this problem, simply specify the value you'd like to use, then auto for the other value.
#sample {
background-size: 100px auto;
}
We simply add this property to the example above.
background-image: url("/img/paper-background.jpg")
You can see that this background example is scaled so that it can fit within our containing element.
Background Placement background-clip, background-origin
You can specify where in your container you want the background to be placed in. There are two CSS properties you can use:background-clip
andbackground-origin
.
Background Clip
The background-clip
property tells where the containing element should start clipping the background. By default, it is set to border-box
.
The image still starts at the top right corner.
The red color indicates portions that are cut off. Thus the border-box
won't cut any of the image, while the padding-box
and content-box
does.
Background Origin
The background-origin
tells where a background's top right corner should be placed.
This is very similar to background-clip
in its option for values.
Thus, by having the same value for this property as background-clip
, we can avoid an image from being cropped.
Positioning A Background
To position a background within the containing element, we use the background-position
property.
The values we can place are top
,center
,bottom
,left
, andright
.
Additionally, we can use combintations like right top
, which is exemplified here.
We can also use a length or a percentage.
The point of origin is the top left, which can be specified by 0% 0%
. 50% 50%
would be center.
Attaching the Background with fixed
Sometimes you want the background to stay in place while the user scrolls down. In this case, all other elements will move down, while the background stays in place.
To achieve this effect, use the background-attachment
property with the fixed
value.
Alternatively, you can specify scroll
if you want the background image to move up and down as the user scrolls.
Make sure your image is long enough, or is repeatable if you set your value to scroll!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed interdum vitae metus in placerat. Fusce vel tellus bibendum, scelerisque diam a, suscipit arcu. Vestibulum id purus vitae tortor consequat tempor in nec quam. Sed quis augue quis urna elementum semper. Pellentesque eleifend accumsan tempor. Donec efficitur, dui ut convallis vulputate, tortor velit placerat odio, et molestie urna arcu in felis. Proin ultricies purus ullamcorper, condimentum dolor at, ornare elit. Ut et mi nec massa euismod iaculis. Nullam ullamcorper, dolor nec ultrices elementum, tellus lorem tempor metus, id porta ligula massa et nisi. Sed hendrerit orci a turpis efficitur, et mollis felis imperdiet. Donec viverra ultrices viverra. Vestibulum a mi nec massa elementum tristique in vitae magna. Ut non ipsum quis eros sollicitudin mattis a id justo. Sed eu suscipit tellus, nec sollicitudin sapien.
Quisque quis enim fermentum, consectetur metus vitae, varius leo. Maecenas feugiat, metus vitae semper vehicula, nisl dui pellentesque purus, vitae auctor lorem nibh quis metus. Nullam ac mattis massa. Fusce ultricies dapibus nulla, sodales pellentesque arcu molestie in. Donec eget leo vel tellus convallis porttitor. Maecenas lorem nisi, fermentum auctor scelerisque id, placerat eget magna. Duis finibus nec dolor quis elementum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent suscipit pellentesque tortor, non egestas mi tempor sed. Ut laoreet aliquam nisi vel rutrum. Suspendisse volutpat et arcu vel varius. Nulla facilisi. Ut in nisi justo. Morbi at congue dui, in euismod sem.
Sed vestibulum nisi eget semper accumsan. Mauris in nunc eu metus pellentesque blandit vitae pretium magna. Donec quis est pellentesque, rhoncus sapien id, fermentum nunc. Etiam sed imperdiet nibh. Mauris sed est in ipsum interdum semper. Vestibulum et faucibus odio. Aliquam pulvinar, dui eu rhoncus sodales, tellus lorem aliquet leo, sed pellentesque tellus tellus ut diam. Sed sit amet orci nunc. Donec nec justo eu lorem fringilla molestie at eget ex. Phasellus aliquet ipsum vitae arcu mattis, eu tempor nulla finibus. Ut euismod, ipsum eget rhoncus porttitor, mauris nulla ultrices nisi, quis venenatis ipsum metus sed ante. Donec pulvinar nisl in faucibus porttitor. Cras in orci mauris.
Background Repeats background-repeat
To specify how an image should repeat, we use the background-repeat property.
With value set to repeat
, we get a tile effect, repeating horizontally and vertically:
With value set to repeat-y
, the background repeats vertically.
With value set to repeat-x
, the background repeats horizontally.
With value set to no-repeat
, the background does not repeat at all.
Multiple Backgrounds background
You can place multiple image locations separated by a comma. This is useful if you have a background in which parts of it are repeating elements.
A good example of this would be some background with a border that consists of repeating elements.
Since each repeated element is loaded only once, you can save your user bandwidth, resulting in a page that loads faster.
#background-image {
background: /* Four corners of your background image */
url('bg1.png') top left no-repeat,
url('bg2.png') top right no-repeat,
url('bg3.png') bottom left no-repeat,
url('bg4.png') bottom right no-repeat,
/* Four edges that repeat */
url('bgLeft.png') left repeat-y,
url('bgRight.png') right repeat-y,
url('bgTop.png') top repeat-x,
url('bgBottom.png') bottom repeat-x
}
Background shorthand notation
To specify background properties as a shorthand notation, we use the background
property.
background: background-color, background-image, background-attachment, background-position
Note that these must be in order. If you don't want to use any of the properties, simply skip them.
Image Sprites
The collection of images placed in a single image is known as an image sprite.
The idea is to have this single image changes position as the user's mouse change state. The user's act of moving over is called rollover.
So why use a single image sprite rather than three separate images. Simply put, it saves the user bandwidth and reduces the number of server requests.
Here is the breakdown of how it works:- Set the background image for the link/button, but set the background-size to have just enough space to show just one of the images.
- When the user hovers over the image, position the image up so that the other active state image is shown.
- Now there just enough space for that new button, so the other buttons are hidden.
- The effect we get is that the link changes image as the user changes his or her mouse state.