background-color

You have already learnt about background-color in the color Chapter. So Now let's learn about background-image.

background-image

The background-image property in CSS applies a graphic (e.g. PNG, SVG, JPG, GIF, WEBP) or gradient to the background of an element. There are two different types of images you can include with CSS: regular images and gradients.

The url() value allows you to provide a file path to any image, and it will show up as the background for that element.

	.Content {
		width: 300px;
		height: 300px;
		background-image: url(sweettexture.jpg);
	}

Another option when using backgrounds is to tell the browser to create a gradient. Here's a super-duper simple example of a linear gradient:

	.Content {
		width: 300px;
		height: 300px;
		background-image: linear-gradient(black, white);
	}

You will learn about gradient later.

Setting a Fallback Color

If a background image fails to load, or your gradient background is viewed on a browser that doesn't support gradients, the browser will look for a background color as a fallback. You can specify your fallback color like this:

	.Content {
		width: 300px;
		height: 300px;
		background: url(sweettexture.jpg) blue;
	}

The image is failed to load in browser, so the browser uses blue as a background color as a fallback. In this case "background-image" won't work, you have to use the property "background".

background-attachment

The background-attachment property in CSS specifies how to move the background relative to the viewport.

There are three values: scroll, fixed, and local.

There are two different views to think about when talking about background-attachment: the main view (browser window), and the local view (element where the background image is attached).

scroll

This is the default value. It scrolls with the main view, but stays fixed inside the local view.

Consider the following example -

<div class="box" style="display: flex; justify-content: center; flex-direction: column; align-items: center;">
	<div style="height:250px;width:900px;background-image:url(Assets/img/Santanu.jpg);background-attachment: scroll; overflow:scroll;">
		<ul>
			<li>Content</li>
			<li>Content</li>
			<li>Content</li>
			<li>Content</li>
			<li>Content</li>
			<li>Content</li>
			<li>Content</li>
			<li>Content</li>
			<li>Content</li>
			<li>Content</li>
			<li>Content</li>
			<li>Content</li>
			<li>Content</li>
			<li>Content</li>
			<li>Content</li>
			<li>Content</li>
			<li>Content</li>
			<li>Content</li>
			<li>Content</li>
			<li>Content</li>
			<li>Content</li>
			<li>Content</li>
			<li>Content</li>
			<li>Content</li>
			<li>Content</li>			
		</ul>
	</div>
</div>

fixed

Stays fixed no matter what. It's kind of like a physical window: moving around the window changes your perspective, but it doesn't change where things are outside of the window.

Consider the previous example but with the value "fixed" for "background-attachment" -

local

It was invented because the default scroll value scrolls both with the main view and the local view. But this value scrolls the background image in respect with both the local and main view.

Consider the previous example but with the value "local" for "background-attachment" -

background-clip

background-clip lets you control how far a background image or color extends beyond an element's padding or content.

• border-box is the default value. This allows the background to extend all the way to the outside edge of the element's border.
• padding-box clips the background at the outside edge of the element's padding and does not let it extend into the border.
• content-box clips the background at the edge of the content box.

background-origin

background-origin is same as background-clip. There is slightly difference between them. But without major difference they can be used interchangably. They both have the same value.

background-position

The background-position property in CSS allows you to move a background image (or gradient) around within its container.

It has three type of values -

• Length values (100px 5px)
• Percentages (10% 20%)
• Keywords (top, right)

The default values are 0 0. This places your background image at the top left of the container.

Length values are pretty simple: the first value is the horizontal position, second value is the vertical position. So 100px 5px will move the image 100px to the right and five pixels down. You can set length values in px, em, or any of the other CSS length values.

Percentages work a little differently. Get your math hats out: moving a background image by X% means it will align the X% point in the image to the X% point in the container. For example, 50% means it will align the middle of the image with the middle of the container. 100% means it will align the last pixel of the image with the last pixel of the container, and so on.

Keywords are just shortcuts for percentages. It's easier to remember and write top right than 100% 0, and that's why keywords are a thing. Here is a list of all five keywords and their equivalent values:

• top 0% vertically
• right 100% horizontally
• bottom 100% vertically
• left 0% horizontally
• center 50% horizontally if horizontal isn't already defined. If it is then this is applied vertically.

It's interesting to note that it doesn't matter what order you use for the keywords: top center is the same as center top. You can only do this if you're exclusively using keywords, though. center 10% is not the same as 10% center.

Consider the following example -

<div class="box">
	<div style="width: 500px; height: 500px; background: url(Assets/img/Santanu.jpg); 
	border: 1px solid black; background-size: 200px 200px; 
	background-repeat: no-repeat; background-position: 20% 30%;"></div>
</div>

Using More than two values

You can give background-position up to four values in modern browsers.

If you declare one value, that value is the horizontal offset. The browser sets the vertical offset to center by default.

When you declare two values, the first value is the horizontal offset and the second value is the vertical offset.

When you specify three values, the browser interpets the "missing" fourth value as 0. Here's an example of a three-value background-position:

	#threevalues {
	  background-position: right 45px bottom;
	}

This positions the background image 45px from the right and 0px from the bottom of the container. Here's an example of a four-value background-position:

	#fourvalues {
	  background-position: right 45px bottom 20px;
	}

This puts the background image 45px from the right and 20px from the bottom of the container. Here is an example -

	<div class="box">
		<div style="width: 500px; height: 500px; background: url(Assets/img/Santanu.jpg); border: 1px solid black; 
		background-size: 200px 200px; background-repeat: no-repeat; background-position: right 20px bottom 30px;"></div>
	</div>

background-repeat

If a background-image property is specified, the background-repeat property in CSS defines if (and how) it will repeat. You can use the following values -

• repeat tile the image in both directions. This is the default value.
• repeat-x tile the image horizontally
• repeat-y tile the image vertically
• no-repeat don't tile, just show the image once
• space tile the image in both directions. Never crop the image unless a single image is too large to fit. If multiple images can fit, space them out evently images always touching the edges
• round tile the image in both directions. Never crop the image unless a single image is too large to fit. If multiple images can fit with leftover space, squish them or stretch them to fill the space. If it's less than half one image width left, stretch, if it's more, stretch.

<div class="box">
	<div style=" margin: 20px; width: 500px; height: 500px; background: url(Assets/img/Santanu.jpg); 
	border: 1px solid black; background-size: 150px 150px; background-repeat: repeat;"></div>
	<div style=" margin: 20px; width: 500px; height: 500px; background: url(Assets/img/Santanu.jpg); 
	border: 1px solid black; background-size: 150px 150px; background-repeat: repeat-x;"></div>
	<div style=" margin: 20px; width: 500px; height: 500px; background: url(Assets/img/Santanu.jpg); 
	border: 1px solid black; background-size: 150px 150px; background-repeat: repeat-y;"></div>
	<div style=" margin: 20px; width: 500px; height: 500px; background: url(Assets/img/Santanu.jpg); 
	border: 1px solid black; background-size: 150px 150px; background-repeat: no-repeat;"></div>
	<div style=" margin: 20px; width: 500px; height: 500px; background: url(Assets/img/Santanu.jpg); 
	border: 1px solid black; background-size: 150px 150px; background-repeat: space;"></div>
	<div style=" margin: 20px; width: 500px; height: 500px; background: url(Assets/img/Santanu.jpg); 
	border: 1px solid black; background-size: 150px 150px; background-repeat: round;"></div>
</div>

Using two values

Till now we are using one values to the bakground-repeat. But technically it accepts two values. One for horizontal repeatation and another is vertically repeatation. Which makes the single-value syntaxes just shorthand for the two-value syntax. For example, round is really round round. Try changing the single value with two values with different combination and see the effect. You will get an idea.

background-size

It specifies the size of the background image. It can take three values -

• One Value
• Two Values
• Keyword (auto, cover and contain)

One Value

If you only provide one value (e.g. background-size: 400px) it counts for the width, and the height is set to auto. You can use any CSS size units you like, including pixels, percentages, ems, viewport units, etc.

<div class="box">
	<div style=" margin: 20px; width: 500px; height: 500px; 
	background: url(Assets/img/Santanu.jpg); border: 1px solid black; background-size: 350px; background-repeat: no-repeat;"></div>
</div>

Two Value

If you provide two values, the first sets the background image's width and the second sets the height. Like the single value syntax, you can use whatever measurement units you like.

<div class="box">
	<div style=" margin: 20px; width: 500px; height: 500px; background: url(Assets/img/Santanu.jpg); 
	border: 1px solid black; background-size: 350px 100px; background-repeat: no-repeat;"></div>
</div>

Keyword values

cover tells the browser to make sure the image always covers the entire container, even if it has to stretch the image or cut a little bit off one of the edges. contain, on the other hand, says to always show the whole image, even if that leaves a little space to the sides or bottom.

The default keyword — auto — tells the browser to automatically calculate the size based on the actual size of the image and the aspect ratio.

Following syntax uses the value cover -

<div class="box">
	<div style="width: 500px; height: 500px; background: url(Assets/img/Santanu.jpg); 
	border: 1px solid black; background-repeat: no-repeat; background-size: cover;"></div>
</div>

Following syntax uses the value contain -

<div class="box">
	<div style="width: 500px; height: 500px; background: url(Assets/img/Santanu.jpg); 
	border: 1px solid black; background-repeat: no-repeat; background-size:contain; "></div>
</div>

Following syntax uses the value auto -

<div class="box">
	<div style="width: 500px; height: 500px; background: url(Assets/img/Santanu.jpg); 
	border: 1px solid black; background-repeat: no-repeat; background-size:auto; "></div>
</div>

background

The background property in CSS allows you to control the background of any element (what paints underneath the content in that element). It is a shorthand property, which means that it allows you to write what would be multiple CSS properties in one. Like this:

	body {
	  background:
	     url(sweettexture.jpg)    /* image */
	     top center / 200px 200px /* position / size */
	     no-repeat                /* repeat */
	     fixed                    /* attachment */
	     padding-box              /* origin */
	     content-box              /* clip */
	     red;                     /* color */
	}

You can use any combination of these properties that you like, in almost any order (although the order recommended in the spec is above). There is a gotcha though: anything you don't specify in the background property is automatically set to its default. So if you do something like this:

Using background as a shorthand property is not recomended. As it is not readable much and it's difficult to understand. Use individual background property to make your code readable.