CSS Backgrounds





CSS background properties are responsible for creating the background effects of elements


There are several background properties:


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







Part 1

CSS Background-image


background-image allow you to place image as background for an element, by default the image is repeated thus covers the entire element


Code Example:

                   
                   body {
                    background-image: url('../img/background-3.jpg');
}
                 
                 
Try yourself >>

Make sure the text is readable, some images will interfere with the text, or change the text color using CSS.


We use the path ../img/background-3.jpg because our image folder is placed in diffrenet area, but you can also use /img/background-3.jpg as your path to the image.








Part 2

CSS Background-color


background-color is responsible for the background color of an element:


Code Example:

                   
                   body {
  background-color: grey;
}
                 
                 
Try yourself >>

In this example we declare multiple backgrounds for diffrenet elements:


Code Example:

                   
                   p {
  background-color: red;
}

div {
  background-color: #BFE5C9;
}

h1 {
  background-color: yellow;
}
                 
                 
Try yourself >>







Part 3

CSS Background-position


background-position is resposible for the position of the image background.


Code Example:

                   
                   body {
                    background-image: url('../img/womanavatar.png');
                    background-position: right top;
                      background-repeat: no-repeat;
}
                 
                 
Try yourself >>








Part 4

CSS Background-attachment


background-attachment allow you to decide if the background image can scroll or be fixed.


Code Example:

                   
                   body {
                    background-image: url('../img/womanavatar.png');
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}
                 
                 
Try yourself >>



background-attachment: scroll:


Code Example:

                   
                   body {
                    background-image: url('../img/womanavatar.png');
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: scroll;
}
                 
                 
Try yourself >>








Part 5

CSS Background-repeat


background-repeat allow you to controll how an image repeat (horizontally and vertically):


The next example show before and after:


Code Example:

                   
                  body {
                    background-image: url('../img/background5.jpg');
}
                 
                 
Try yourself >>



We can now change this using background-repeat: repeat-x; (only horizontally)


You can also use background-repeat: repeat-y; to repeat an image vertically


Code Example:

                   
                  body {
                    background-image: url('../img/background5.jpg');
                    background-repeat: repeat-x;

}
                 
                 
Try yourself >>







Part 6

CSS Background shorthand property


You can be effiecent and declare all the background properties in one line:



Code Example:

                   
                   body {
  background: grey url('../img/womanavatar.png') no-repeat right top;
}
                 
                 
Try yourself >>

You must write the properties in this order: (you don't have to use all of them, but must write them in this order)


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


All CSS Background Properties


Operator Example
background declare the background properties
background-color declare the background color of an element
background-image declare the background image path
background-position decide the position of a background image
background-repeat declare how a background image will be repeated
background-size declare or change the size of the background image
background-attachment decide whether a background image is fixed or not
background-origin declare where the background image is positioned
background-clip Specifies the painting area of the background


enjoy the best tutorial for css, our main goal is to create html css learning sites,our courses are free and always will be, learn css3 online.



Navigation