CSS Lesson 6: Background

0
11

Background

An elegant background will give your website a professional look. CSS backgrounds are very important for your website’s success. Try to use simple but eye-catching background colors and images, and make sure to position them properly!

In this lesson, you will learn how to set background colors and images. You’ll also learn about image positioning. So let’s get started.

Background Color

You have learned in detail about the Colors in HTML and Text lesson of CSS. However, here is a brief introduction about colors.

In CSS colors are defined in three values: RGB value: rgb(255,0,0) HEX value: #ff0000 Color name: red”

Background can be set for any Elements Here is the syntax and how to use background-color property in CSS. Check out this example:

Source Code Output

WikiProgramming CSS Background Tutorial

You see? Background-color property doesn’t set the background for a text area, but for the whole area. If you want to have a static background color for your whole page you can put it in <body> tag.

[tooltip]Try to use light colors for your background with darker text. It gives a professional touch to your website. We’ve created a complete list of colors for you- have a look! Color Chart[/tooltip]

Background Image

Just like a color, you can place the background image as well. Take a look at the following example:

Source Code Output

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

You see! We placed the image behind the paragraph’s background. You can also put it behind the whole webpage.

Repeat Background

Have you noticed that the background image is repeating? It’s doing so because we didn’t tell CSS to place it within specific area.

Usually, a background repeats vertically (y-axis) and horizontally (x-axis). By default, the background keeps repeating over the webpage area. We will use the CSS property to control the background. background-repeat has the following values

The following example is about no-repeat value

Source Code Output

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

As you can see, the image didn’t repeat again due to the no-repeat value.

Background Attachment

Another property of CSS background is attachment. It allows you to make a background image fixed or scrolled. Here is the syntax of background-attachment.

[tooltip]Background-attachment is best used in the body of an HTML document. If you want the background image fixed or scrolled, then put it in the body tag using CSS background-attachment property.[/tooltip]

Background Positioning

Sometimes, the adjustment properties don’t fulfill your design requirements, and you can’t put the image at the desired place. CSS Background Positioning helps you to position the background at the place you want. You can define the values for length, percentage, and keywords. Here is the syntax and values of background-position property.

[tooltip] It is highly recommended to use pixel values to define the position.[/tooltip]

Background Shorthand

You learned about the Shorthand tool in the previous lesson, remember? Let’s apply this technique in Background property. Here’s the syntax of it:

Not combined Combined

Summary

  • Use CSS Background color and image to enhance your website design.
  • You can add colors in background using background-color property.
  • Add image with background-image property
  • Use background-repeat property to control image repetition.
  • Position your image with background-position property

Next Lesson

In the next lesson we will learn about the CSS Links.

Leave a Reply