CSS BACKGROUND

❮ Prev Next ❯

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

CSS background color
CSS background image
background repeat
background attachment
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

More Learning

Want to learn more about programming and web development? We have a few recommendations for you.

❮ Prev Next ❯