CSS Backgrounds

The background of a document has a powerful impact on its visual appearance. CSS allows one to set the background of an element, whether by coloring it or setting an image in the background.

The CSS background properties are background color, background image, background repeat, background attachment, and background shorthand.

CSS Background Color

In CSS, the background color can be specified as the desired element or the whole document.

/* Background color for the whole document */
body {
  background-color: lightgray;
}
/* Background color for a specific element */
div {
  background-color: lightblue;
  padding: 20px;
  text-align: center;
}

We have to specify the color by:

A color name
A HEX value
A RGB value

.color-name {
  background-color: tomato; /* color name */
}
.hex-value {
  background-color: #3498db; /* HEX value */
}
.rgb-value {
  background-color: rgb(46, 204, 113); /* RGB value */
}

We can also set an element’s opacity to the desired background color. The value is between 0.0 and 1.0.

However, this will apply transparency to the background and all its child elements. We can use transparency in the background color to avoid having transparency applied to the child elements.

/* Opacity - Affects entire element */
div.opacity-example {
  opacity: 0.5;
  background-color: blue;
}
/* RGBA - Transparency only on background */
div.rgba-example {
  background-color: rgba(255, 0, 0, 0.5);
  color: black;
}

CSS Background Image

In CSS, the background image property allows an image to be set as an element’s background. By default, the image repeats to cover the entire document. Using an image that will not interfere with the text is better.

/* Background Image for an Element */
div {
  background-image: url('image.jpg'); /* Set the background */
  background-size: cover; /* Image covers the entire area */
  color: white; /* Text color */
}

CSS Background Repeat

The background image property, by default, makes an image repeat horizontally and vertically. However, some images will look weird when repeated both horizontally and vertically, so we have to be specific while setting a background image to repeat.

For horizontal setting, write the command as background-repeat: repeat-x;
For vertical placement, use background-repeat: repeat-y;

/* Background repeats by default */
div.default-repeat {
  background-image: url('image.jpg');
  background-repeat: repeat;
}
/* Background repeats only horizontally */
div.repeat-x {
  background-image: url('image.jpg');
  background-repeat: repeat-x;
}
/* Background repeats only vertically */
div.repeat-y {
  background-image: url('image.jpg');
  background-repeat: repeat-y;
}

CSS Background-Repeat: No-Repeat

The background-repeat property allows to specify the background image only once. However, the background image is set behind the text.

To avoid text disruption the image position has to be adjusted.

/* Background image appears only once and does not repeat */
div.no-repeat {
  background-image: url('image.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

CSS Background-Position

By using the background-position feature in CSS, we can adjust the position of the image so it does not affect the text’s visuality.

The background positions in CSS include top, bottom, left, right, center, top left, top right, bottom left, bottom right, 50% 50%, and specific pixel values like 10px 20px.

div.background-position-example {
  background-image: url('image.jpg');
  background-position: center center;
}

CSS Background-Attachment

This property will determine whether the image will scroll or will not scroll.

div {
  background-image: url('image.jpg');
  background-size: cover;
  height: 200px;
}
/* Background scrolls with the content */
div.scroll {
  background-attachment: scroll;
}
/* Background stays fixed while scrolling */
div.fixed {
  background-attachment: fixed;
}

CSS Background-Shorthand

We can shorten the code by specifying all the background properties in one property, which is called a shorthand property.

You can apply the shorthand property “background.” When using this shorthand, you must follow the order given below of the property values:

Background color
Background image
Background repeat
Background attachmentnBackground position

div {
  background: lightblue url('image.jpg') no-repeat fixed center; 
  height: 200px;
}

If one of the property values is missing, it will not affect the shorthand property. Just ensure the rest of the values are in the same order as mentioned above.

We can elevate the website’s design by gaining command of the CSS background property. Combining the CSS color, image, and background-position can achieve user-friendly interference. Use these techniques to create an engaging online experience.

Learning Axis

youtube.com/@learning-axis

HTML

CSS