CSS Backgrounds

CSS Backgrounds



CSS background properties are used to add background effects for elements

We will learn below following CSS background properties:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
  • background (shorthand property)

CSS background-color

The background-color property specifies the background color of an element.


Syntax: {background-color: color;}

With CSS, we can specify a color by using below values
a valid color name - like "red"
a HEX value - like "#ff0000"
an RGB value - like "rgb(255,0,0)"

body{
    background-color: lightblue;
}



CSS background-image

The background-image property specifies an image to use as the background of an element.
By default, the image is repeated so it covers the entire element.
Set the background image for a page: 

body{
    background-color: lightblue;
    background-image: url(./featured-small-circular.jpg);
}




CSS background-repeat

By default, the background-image property repeats an image both horizontally and vertically.
Some images should be repeated only horizontally or vertically
If the image above is repeated only horizontally (background-repeat: repeat-x;), the background will look better

body{
    background-color: lightblue;
    background-image: url(./featured-small-circular.jpg);
    background-repeat: repeat-x;
}



To repeat an image vertically, set background-repeat: repeat-y

body{
    background-color: lightblue;
    background-image: url(./featured-small-circular.jpg);
    background-repeat: repeat-y;
}


CSS background-repeat: no-repeat

To Show the background image only once is also specified by using background-repeat property

body{
    background-color: lightblue;
    background-image: url(./featured-small-circular.jpg);
    background-repeat: no-repeat;
}




background-position

background-position property is used to specify the position of the background image

body{
    background-color: lightblue;
    background-image: url(./featured-small-circular.jpg);
    background-repeat: no-repeat;
    background-position: right top;
}



CSS background - Shorthand property

To shorten the code, it is also possible to specify all the background properties in one single property. This is called a shorthand property.

You can use the shorthand property background:

body {
    background-color: lightblue;
    text-align: center;
    background-image: url(./featured-small-circular.jpg);
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: scroll;
/* shorthand */
    background: lightblue url(./featured-small-circular.jpg) repeat right top;
}



Related Posts:

  • CSS-simplified-series.html INTRODUCTIONIntroduction to CSS Ways to Add CSSCSS SelectorsCSS CommentsCSS PropertiesCSS ColorsCSS BackgroundsCSS BorderCSS MarginCSS Padd… Read More
  • CSS BackgroundsCSS BackgroundsCSS background properties are used to add background effects for elementsWe will learn below following CSS background properties:backgr… Read More
  • CSS Comments CSS comments are the same as what you must have learned in any technical language. It is written to explain the code and is helpful for the user… Read More
  • CSS ColorCSS ColorsColor property is used to set the color of the text.Syntax: {color: value;}Now there are many ways of giving this value to the colour. Some … Read More
  • Introduction to CSSWhat is CSS?CSS is a language that we use to style an HTML document.It describes how elements will be displayed.CSS stands for Cascading Style Sheets.… Read More

0 Comments:

Post a Comment

Do leave your comments