Tutorials Tonight's Logo

CSS BACKGROUND


CSS background properties are used to style background of HTML element.There are 5 different CSS background property:

  1. CSS background color
  2. CSS background image
  3. background repeat
  4. background attachment
  5. CSS background position



1).CSS background color

background-color is a CSS property that is used to define the background color of any HTML element.You can specify color value in any way like rgb,hex,hsl or color-name itself.

h2{
    background-color:cyan;
}
p{
    background-color:Green;
}
▶ Run the code

2).CSS background image

background-image is a CSS property that is used to define background color of any HTML element.Path of image is given using url() property.

background-image:url('path_of_image')

body{
    background-image:url('background-image.jpg');
}
▶ Run the code

3).background repeat

background-image repeats itself both horizontally and vertically by default.So either to avoid repetition or to direct repetition in one direction we use background-repeat property.

We use background-repeat: repeat-x; to repeat background-image in x direction.

body{
    background-image:url('background-image2.jpg');
    background-repeat:repeat-x;
}
▶ Run the code

We use background-repeat: repeat-y; to repeat background-image in y direction.

body{
    background-image:url('background-image2.jpg');
    background-repeat:repeat-y;
}
▶ Run the code

We use background-repeat: no-repeat; for background-image not to repeat in any direction.

body{
    background-image:url('background-image2.jpg');
    background-repeat:no-repeat;
}
▶ Run the code

4).background attachment

This property specifies whether the background-image will scroll or be fixed relative to the webpage.

body{
    background-image:url('background-image2.jpg');
    background-attachment:scroll;
}
▶ Run the code

5).CSS background position

This property define initial position of background-image on the web page.By default image starts from top-left cornor.

We can have background-position values like top,bottom,left,right,center etc.

body{
    background-image:url('background-image2.jpg');
    background-repeat:no-repeat;
    background-position:center;
}
▶ Run the code

Follow Us

Copyright © Tutorials Tonight. All Rights Are Reserved.