CSS tutorial: Get started with CSS background

What is CSS background?#

CSS background is a CSS shorthand property. We can use shorthand properties to set the values of multiple CSS properties at the same time. This means that we can write readable code more quickly and efficiently. We can use the background properties to manipulate the background of an element.

CSS background allows us to manipulate many background properties, such as:

CSS background image#

We can use the background-image property to set background images for different elements. Modern browsers support various image file types such as JPG, PNG, IMG, GIF, and SVG. We can also set a fallback color, which is the color that will show in the event that our image fails to load or our browser doesn’t support our image file type.

To set a background image for a page, we can use the following code:

We also need to make sure that we code the images in the exact order that we want them to appear, meaning that the image we want at the front should be first, and the image we want at the back should be last. The code looks the same as it does for a single background image, but the image file names are separated by commas.

If we want to set a fallback color, we can use the following code:

Background color#

The background-color property allows us to apply solid colors as backgrounds on elements. There are different property values that we can use to control aspects of the background color. These values include:

• color: This value specifies the background color. We can choose from the list of CSS color values to choose the exact colors we want to use.

• opacity: This value specifies the opacity of an element.

• transparent: This value specifies that the background color is transparent.

• initial: The property will be set to its default value.

• inherit: The property will be inherited from its parent element.

Background size#

The background-size property allows us to specify the size of a background image.

Background position#

The background-position property allows us to specify the starting position of a background image. Background images are put at the top-left corner of an element by default. This property has different property values that allow us to control how our background images are positioned. These values include:

Background repeat#

The background-repeat property allows us to specify if and how background images repeat. Background images are repeated vertically and horizontally by default. This property has many different property values that allow us to control how our background images are presented. Let’s take a look at the values and what they do:

Background attachment#

We can use the background-attachment property to specify whether we want our background images to be fixed, or if we want them to move with the rest of the page when we scroll. This property has different property values that allow us to control how we attach our background images. These values include:

• fixed: The background image doesn’t scroll with the page.

• local: The background image scrolls with the contents of the element.

• scroll: The background image scrolls with the page.

• initial: The property will be set to its default value.

• inherit: The property will be inherited from its parent element.

Let’s take a look at an example of the fixed value:

Background gradient#

The CSS background gradient properties allow us to create a gradient effect between two or more colors. Gradients support transparency, so we can create fading effects with our gradient. There are two types of gradients: linear gradients and radial gradients.

Linear gradients#

With the linear-gradient property, we can create linear gradients that go top to bottom, left to right, and diagonally. We must define at least two color stops, which are the colors we want to transition together. We can define multiple color stops and repeat gradients if we want.

Let’s take a look at a basic linear gradient that runs top to bottom with two colors:

With the radial-gradient property, we can create a gradient that’s defined by its center. The default shape of radial gradients is an ellipse, but it can be changed into a circle. We must define at least two color stops with radial gradients, but we can define multiple if we want. Similar to the linear gradients, we can also repeat radial gradients.

Let’s take a look at a basic radial gradient with three colors:

Wrapping up and next steps#

Congrats on taking your first steps with CSS background! There are many different ways we can manipulate our web pages using the different properties we explored today. CSS is an important part of front-end web development. There’s still a lot more to learn about CSS files. Some recommended topics to cover next include:

• Flexbox
• CSS selectors
• Inline vs. block elements
• HTML templates and HTML elements

To get started learning these concepts and more, check out Educative’s learning path Become a Front End Developer. In this hands-on learning path, you’ll gain a mastery of HTML, CSS, and JavaScript so you can create beautiful and functional websites and web apps. The skills you gain in this path will give you a valuable leg up on your front-end journey!

Happy learning!

Continue learning about CSS#

• CSS interview questions: Cheat sheet for front-end interviews
• Complete guide to CSS positions: Element layout in CSS
• Revamp your front-end skills: Hands-on with HTML5 and CSS3