OBINTUSACADEMY
HOME CONTACT SERVICES PRIVACY
C.B MS-PACKAGES CSS
CSS - Background

BASIC

Introduction to CSS Getting Started CSS Basic Structure CSS Syntax CSS Selectors CSS Universal Selector CSS Element Selector CSS ID Selector CSS Class Selector CSS Group Selector CSS Descendant Selector CSS Child Selector CSS Adjacent Sibling Selector CSS General Sibling Selector CSS Pseudo Element Selector CSS Pseudo Class Selector CSS Attribute Selector CSS Comments CSS Rule CSS Colors CSS Foreground and Background Color CSS Fonts CSS Background CSS Background Clip CSS Background Origin CSS Background Size CSS Text/Word Formatting CSS Images

INTERMEDIATE

CSS Borders CSS Margin CSS Padding CSS Dimension CSS Outline CSS Lists CSS Tables CSS Links CSS Overflow CSS Cursor CSS Float CSS Clear

CSS Background

PREVIOUS NEXT

In this tutorial, I will be showing you how to use background elements (such as colors or images) to arrange and organize them to match your desired output.

Background Properties

CSS provides you with different background properties that you can use for adding and managing background elements.

BACKGROUND COLOR

The background-color property in CSS is used to add color as the background of the element. It takes any color value types:

  • Red, Blue, Green, etc
  • RGB - rgb(34, 102, 35), rgb(56, 122, 200), etc.
  • HEX - #ff45eb, #ff00ad, etc.
  • HSL - hsl(45, 30%, 200%)
  • Inherit, Initial, etc.
TRY IT OUT YOURSELF

BACKGROUND IMAGE

The background-image property in CSS is used to add image as the background of the element.

TRY IT OUT YOURSELF

BACKGROUND REPEAT

The background-repeat property in CSS is used to control the repetition of the background image. It takes any of the following values:

  • repeat - repeat the image vertically and horizontally.
  • repeat-y - repeat the image vertically.
  • repeat-x - repeat the image horizontally.
  • no-repeat - don't repeat the image.
TRY IT OUT YOURSELF
TRY IT OUT YOURSELF
TRY IT OUT YOURSELF
TRY IT OUT YOURSELF

BACKGROUND ATTACHMENT

The background-attachment property in CSS is used to specify whether the background image should remain fixed or not, while scrolling the page. Its values include:

  • fixed
  • scroll
TRY IT OUT YOURSELF

BACKGROUND POSITION

The background-position property in CSS is used to set the position of the background image. By default, the position is (0,0). It takes both numeric or keyword values:

  • (40px, 20px)
  • (top, right)
TRY IT OUT YOURSELF

Background Shorthand

The background property in CSS is used as a shorthand for other properties. It follows this order.

  • background: background-color | background-image | background-repeat | background-attachment | background-position
TRY IT OUT YOURSELF
PROPERTY DESCRIPTION
background-color

Adds color as the background of the element.
background-image

Adds image as the background of the element.
background-repeat

Controls the repetition of the background image.
background-attachment

Specifies whether the background image should remain fixed or not, while scrolling the page.
background-position

Sets the position of the background image.
background

Shorthand for all other background properties.

PREVIOUS NEXT
ADVERTISEMENTS

LEARNING IS A CONTINOUS PROCESS - PRACTICE MAKES PERFECT