CSS Background - Understanding Background Properties

background

Let us check different background properties one by one. We will see all the below defines properties in detail. 
  • background-color - define color
  • background-image - define image
  • background-repeat - whether background-image should be repeated or not
  • background-position - sets the position for background-image
  • background-size - defines size
  • background-attachment - defines regarding attachment
  • background-origin - origin
  • background-clip - clip

background-color 

This property allows us to apply colors to our elements. We can define colors in various formats such as hex-code, color names, RGB, RGBA, HSL or HSLA. We will see an example now:

body{
  background-color: #007DA3;
}


body{
  background-color: red;
}

We can define a color using background property also. We can define opacity also using the CSS property opacity.

body{
  background: black;
  opacity: 0.3;
}

Now we will see how we can define using RGB, RGBA, HSL or HSLA formats. RGB refers to the combination of red, green and blue colors. We have a wide variety range of colors using different integer values. In RGBA, A refers to alpha which is a number to define transparency. Its value varies between 0.0 and 1.0. We can write the RGBA format as follows to define in our CSS.

body{
  background: rgb(255, 0, 255, 0.4); // Here 0.4 is alpha value
}

background-image

To apply images as background, use the CSS property background-image. Using this property we can apply gradients and graphics. We can use it as:

body {
  background-image: url(file path here);
}

The URL allows the file path for the image which we set as background. We can specify one or multiple images using this property. We can even use the shorthand background property to define an image. 

  background-image: url(flower.jpg);

Background-image is placed at the top-left corner and it is repeated both vertically and horizontally by default. Now we will apply multiple images to an element. Comma-separated values are allowed as follows:

  background: url(flower.jpg) no-repeat, url(color.png) repeat;
  background: url(header.jpg) left bottom no-repeat, url(bg.png) top right repeat; // Defining more CSS properties to set the both images

Sometimes our image will not load. In that case, we can define a color as a substitute or fallback.

  background: url(header.jpg) black;

If now the image will not load due to some reasons, the black color will be shown.

Gradients 

We can apply gradients as background-image. The browser will render an image when we use gradients. Gradients are of two types: Linear gradient and Radial gradient.

Linear gradient

In the linear-gradient, the browser creates an image gradient. The default direction is top to bottom. But it goes left, right, bottom, top, bottom left, etc. We can define it using at least two colors as well as the gradient's direction.  


.headerGradient {
  background-image: linear-gradient(to left, blue, green);
}

Now if we want to see repeating linear-gradient, we can define using the below code:

.headerGradient {
  background-image: repeating-linear-gradient(to left, blue, green);
}

We can apply linear gradients diagonally as well. Four possible diagonal positions can be defined using both vertical and horizontal directions shown below:

.headerGradient {
  background-image: linear-gradient(to top left, blue, green);
  background-image: linear-gradient(to top right, blue, green);
  background-image: linear-gradient(to bottom left, blue, green);
  background-image: linear-gradient(to bottom right, blue, green);
}

We can define linear gradients using angle as well:

.gradients{
  background-image: linear-gradient(30deg, red, yellow);
}

Radial Gradient

As the name suggests, radial-gradient is defined by its center. Two colors need to be defined for a radial gradient as well. 
The shape of the radial gradient is ellipse by default. We can even specify shape to be circle as well.
The position of the gradient is center by default. 

.radialgrad{
  background-image: radial-gradient(green, blue, red);
}

Three colors will be distributed along the gradient ray in this manner. Green ray at 0%, blue at 50% and red at 100%. In between green and blue rays at 0% and 50%, we will get intermediate colors between green and blue. The same applies to blue and red. We can specify the spacing of the colors after the color name.

Note: blue 50% is valid syntax but 50% blue is invalid.

.radialgrad{
  background-image: radial-gradient(green 20%, blue 50%, red);
}

We can even define the position of the gradient as follows. We have to write as follows:

.radialgrad{
  background-image: radial-gradient(at 10% 10% green, blue, red);
}

If we want the gradient to repeat we can write in the following way.

.radialgrad{
  background-image: repeating-radial-gradient(at 10% 10% green, blue, red);
}

Define the shape of the gradient like a circle at or ellipse.

.radialgrad{
  background-image: repeating-radial-gradient(100px ellipse at 10% 10% green, blue, red);
}

background-repeat

This property is used with the background-image to specify whether the image should be repeated or not. 
The values can be:

  • repeat - this is the default value.
  • repeat-x - the tile is repeated horizontally.
  • repeat-y - the tile is repeated vertically.
  • no-repeat - image is shown once only.
  • space - the image will show in both directions. No clipping and space are distributed evenly.
  • round - image will be stretched, squished or repeated to fill the container.

.header{
 background: url('flower.png');
 background-repeat: no-repeat;
}


.header{
 background: url('flower.png');
 background-repeat: repeat-x; 
}


.header{
 background: url('flower.png');
 background-repeat: repeat-y;
}

We can even define it using the background property itself:

.header{
 background: url('flower.png') no-repeat; // Using shorthand background property
}

background-position

This property is used with the background-image to specify the position of the image within the container. We need to define horizontal and vertical positions which can be in a percentage(%) or fixed value defined in px or em units. The first value is horizontal position and the second is vertical position. The default value is 0 0. It means the top left corner of the container.

Background position values can be a single value to multi:

  • The single value indicates the horizontal offset. Vertical will be center in that case.
  • Two values indicate horizontal and vertical offset respectively.
  • Three-or-four value syntax must be keyword value follow by percentages or pixels. The keyword center is not used with three-or-four value syntax.
Values
  • Pixels - Length values such as 100px 300px is defined.
  • Percentages - It works like if we have defined 10% then a 10% point in image will get align to 10% point in the container.
    top - 0%
    bottom - 100%
    left - 0%
    right - 100%
    center - 50% horizontal if horizontal is not applied yet. If horizontal is applied, then it is applied vertically.
  • Keywords - These are top, left, right, bottom or center.

.bg{ 
  background: url('flower.png') no-repeat;
  background-position: bottom right;
}


.bg{ 
  background: url('flower.png') no-repeat;
  background-position: 10% 10%;
}


.bg{ 
  background: url('flower.png') no-repeat;
  background-position: 20px 50px;
}


.bg{ 
  background: url('flower.png') no-repeat;
  background-position: top 20px left; // Three value synta (In this case fourth value which is left position is considered as 0)
}


.bg{ 
  background: url('flower.png') no-repeat;
  background-position: top 20px left 10px; // Four value syntax
}

background-size

It is used to define the size of the background-image. We have different syntax for this property.
We can define different values such as:-
Single Value - If a single value is provided, it is considered as the image's width. Height is set to auto. The value can be defined as a percentage, ems, px, etc.
Two Values - The first value is the width and the second value is the height of the image.
Keyword Values - can be cover or contain or auto.

  • cover - this property ensures that image cover over the container even if it needs to stretch or cut the edges.
  • contain - it always shows the full image even if space is left within the container. 
  • auto - this property will set the width and height considering the actual size of the image and aspect ratio.

.img{
  background: url(image1.jpg);
  background-size: 100px;  // In this case width is 100px and height is set to auto.
}


.img{
  background: url(image1.jpg);
  background-size: 100px 200px; 
}


.img{
  background: url(image1.jpg);
  background-size: cover; 
}

Multiple Images

.img{
  background: url(image1.jpg), url(flower.jpg);
  background-size: contain, 100px 200px; 
}

background-attachment

This property is defined to see how the background is scrolled with the rest of the page.
Values can be:
  • Scroll - This is the default value. The image will scroll with the page.
  • Fixed - The image will not scroll with the page. 
  • Local - The image will scroll with the page as well as the element's content.

 .img{
  background: url(image1.jpg);
  background-repeat: no-repeat; 
  background-attachment: fixed;
 }

background-clip

background-clip is the CSS property to define how far or beyond our background will extend after the element's content, padding or border. The default values are:

  • border-box - this is the default property. The background will extend until the element's border outer edge.
  • padding-box - the background will extend until the element's padding outer edge.
  • content-box - this will clip the background until the content edge.
.img{
  background-color: red;
  background-clip: padding-box; // the red color will be applied till the padding outer edge
}


.img{
  background-color: red;
  background-clip: border-box; // the red color will be applied till the border outer edge
}


.img{
  background-color: red;
  background-clip: content-box; // the red color will be applied till the content outer edge. It includes margins as well.
}

background-origin

background-origin is the CSS property to define where the background will originate. It can be from the border edge, padding edge, content edge, etc. 
The values can be:
  • padding-box - default value. The background image or color will get applied from the upper left corner of the padding outer edge.
  • border-box - The background image or color will get applied from the upper left corner of the border outer edge.
  • content-box - The background image or color will get applied from the upper left corner of the content.

.colorImg{
  background-color: red;
  background-origin: content-box; 
}


.img{
  background: url(logo.png) no-repeat;
  background-origin: border-box; 
}

Comments