Solid black background html

CSS tutorial: Get started with CSS background

CSS is an important language that we can use for tasks like basic document text styling, animation, and web development. There are many different CSS properties that we can use to manipulate and customize our web pages. CSS background is one of those properties. We can use the CSS background property to set our background colors, images, sizes, and much more. Today, we’re going to discuss this useful CSS property and explore all of the different things we can do with it.

Get hands-on with CSS for free.

Learn the fundamentals of CSS, HTML, and JavaScript with Educative’s 1-week free trial.

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:

• Chrome
• Edge
• Firefox
• Internet Explorer
• Opera
• Safari

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:

By default, the image repeats so it covers the entire element. We can also use multiple background images if we want. This requires a bit more work because we’ll need to set more values to make sure everything is where we want it to be.

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.

We can also set different background colors for different elements. Here’s an example:

We can also use a number between 0.0 and 1.0 to set the opacity of our background color. The lower the number, the more transparent the color. Let’s look at an example:

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:

• left top: The background image will start at the left top.
• left bottom: The background image will start at the left bottom.
• left center: The background image will start at the left center.
• right top: The background image will start at the right top.
• right bottom: The background image will start at the right bottom.
• right center: The background image will start at the right center.
• center top: The background image will start at the center top.
• center bottom: The background image will start at the center bottom.

• center center: The background image will start at the center center.
• x% y%: The x value is the horizontal position and the y value is the vertical position. The top left corner is 0% 0% and the bottom right corner is 100% 100% .
• xpos ypos: The xpos value is the horizontal position and the ypos value is the vertical position. The top left corner is the value 0 0 .
• initial: The property will be set to its default value.
• inherit: The property will be inherited from its parent element.

Keep learning CSS for free.

Get started with CSS, HTML, and JavaScript for free with our 1-week Educative Unlimited Trial. Educative’s text-based learning paths are easy to skim and feature live coding environments, making learning quick and efficient.

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:

• repeat: The background image is repeated vertically and horizontally. It will clip the final image if it doesn’t fit.
• repeat-x: The background image is repeated horizontally.
• repeat-y: The background image is repeated vertically.
• no-repeat: The background image will not repeat (it will only be shown one time).

• space: The background image will repeat as much as it can without clipping. The first and last images are placed at the beginning and end of the element, and whitespace is evenly spread between repeating images.
• round: The background image will be repeated and manipulated to completely fill the space (with no whitespace in between).
• initial: The property will be set to its default value.
• inherit: The property will be inherited from its parent element.

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:

Now, let’s look at an example of the scroll value. This will make the image scroll with the page.

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:

Now, let’s look at a vertical linear gradient that has multiple colors and creates a rainbow:

Radial gradients

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:

Now, let’s look at a repeating radial gradient:

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:

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!

Continue learning about CSS

Источник