CSS Basics Web development basics

CSS Backgrounds

When a browser reads a style sheet,it modifies the HTML according to it.The CSS background properties are used to define the background effects for elements.

CSS background properties are:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Background-color

syntax:


RESULT:

Hello!
I have a colored background


The valid color can be in form of:

  1. hex values-like #000000
  2. nameslike red,green,blue
  3. or in rgb-like rgb(255,0,0)

In the example below, the

, and other elements have different background colors:( we are dealing with id to style elements)


RESULT:

Hello!
I have a colored background

Background-image

CSS can be used to apply a background-image to entire body and also to various elements.By default image repeats to cover the entire element:
syntax:


RESULT:

Hello!
I have a colored background

Background-repeat (horizontally or vertically)

You can apply this style for repeating the backgrounds so that they look better.
Repeat horizontally-
syntax:


RESULT:

Hello!
I have a colored background

Repeat vertically-
syntax:


RESULT:

Hello!
I have a colored background

No-repeat
syntax:


RESULT:

Hello!
I have a colored background

Background image positioning

The position of the image is specified by the background-position property:
syntax:


RESULT:

Hello!
I have a colored background

Background image FIXED positioning

To specify that the background image should be fixed (will not scroll with the rest of the page), use the background-attachment property:
syntax: