Copied to clipboard

Using background images

Background images are applied to elements via the CSS.

For example, you can set a background image to the body element like so:

body {
    background-image:url('image.jpg');
}

Repeat

By default, setting a background-image alone will repeat the image upwards and downwards like a grid, if it's small enough to be repeated.

You can play with how it repeats like so:

body {
    background-image:url('image.jpg');

    /* don't use all of these at once! */

    background-repeat:no-repeat; /* stop repeat */
    background-repeat:repeat; /* start repeat */
    background-repeat:repeat-y; /* repeat up and down */
    background-repeat:repeat-x; /* repeat left and right */
}

For example, I might want a divider image to only repeat-x.

Sizing

For sizing background images, you can do a lot of different things, but we're only going to focus on a few. All of these methods use the background-size property.

Because the background image is being applied to an element, it's important to keep in mind that the size values we choose are going to be relevant to the element's size.

For demonstration, we're going to use this image which is quite large. It is being displayed in each of the below boxes with different values.

Unstyled
background-size:50%;
background-size:contain;
background-size:cover;

Note that contain fits the image height to the element, while cover fits the image width.

Attachment

The background-attachment property influences the behavior of the background image while a space is being scrolled. Again there are a couple different options here but we'll only look at a couple. Scroll each of the following divs to see the behavior of the associated property.

Jump five feet high and sideways when a shadow moves please stop looking at your phone and pet me bird bird bird bird bird bird human why take bird out i could have eaten that. Adventure always small kitty warm kitty little balls of fur yet eat plants, meow, and throw up because i ate plants but meow meow be a nyan cat, feel great about it, be annoying 24/7 poop rainbows in litter box all day. Hopped up on catnip murf pratt ungow ungow always ensure to lay down in such a manner that tail can lightly brush human face at 5am until human fills food dish or eat fish on floor jump on human and sleep on her all night long be long in the bed

Default (scroll)

Jump five feet high and sideways when a shadow moves please stop looking at your phone and pet me bird bird bird bird bird bird human why take bird out i could have eaten that. Adventure always small kitty warm kitty little balls of fur yet eat plants, meow, and throw up because i ate plants but meow meow be a nyan cat, feel great about it, be annoying 24/7 poop rainbows in litter box all day. Hopped up on catnip murf pratt ungow ungow always ensure to lay down in such a manner that tail can lightly brush human face at 5am until human fills food dish or eat fish on floor jump on human and sleep on her all night long be long in the bed

background-attachment:local;

It's easy to be fooled into thinking scroll makes the background scroll with the page, when actually it's local.