Just a few weeks until the 2021 JavaScript Full-Stack Bootcamp opens.
Signup to the waiting list!
The background of an element can be changed using several CSS properties:
background-color
background-image
background-clip
background-position
background-origin
background-repeat
background-attachment
background-size
and the shorthand property background
, which allows to shorten definitions and group them on a single line.
background-color
accepts a color value, which can be one of the color keywords, or an rgb
or hsl
value:
p {
background-color: yellow;
}
div {
background-color: #333;
}
Instead of using a color, you can use an image as background to an element, by specifying the image location URL:
div {
background-image: url(image.png);
}
background-clip
lets you determine the area used by the background image, or color. The default value is border-box
, which extends up to the border outer edge.
Other values are
padding-box
to extend the background up to the padding edge, without the bordercontent-box
to extend the background up to the content edge, without the paddinginherit
to apply the value of the parent
When using an image as background you will want to set the position of the image placement using the background-position
property: left
, right
, center
are all valid values for the X axis, and top
, bottom
for the Y axis:
div {
background-position: top right;
}
If the image is smaller than the background, you need to set the behavior using background-repeat
. Should it repeat-x
, repeat-y
or repeat
on all the axis? This last one is the default value. Another value is no-repeat
.
background-origin
lets you choose where the background should be applied: to the entire element including padding (default) using padding-box
, to the entire element including the border using border-box
, to the element without the padding using content-box
.
With background-attachment
we can attach the background to the viewport, so that scrolling will not affect the background:
div {
background-attachment: fixed;
}
By default the value is scroll
. There is another value, local
. The best way to visualize their behavior is this Codepen.
The last background property is background-size
. We can use 3 keywords: auto
, cover
and contain
. auto
is the default.
cover
expands the image until the entire element is covered by the background.
contain
stops expanding the background image when one dimension (x or y) covers the whole smallest edge of the image, so it’s fully contained into the element.
You can also specify a length value, and if so it sets the width of the background image (and the height is automatically defined):
div {
background-size: 100%;
}
If you specify 2 values, one is the width and the second is the height:
div {
background-size: 800px 600px;
}
The shorthand property background
allows to shorten definitions and group them on a single line.
This is an example:
div {
background: url(bg.png) top left no-repeat;
}
If you use an image, and the image could not be loaded, you can set a fallback color:
div {
background: url(image.png) yellow;
}
You can also set a gradient as background:
div {
background: linear-gradient(#fff, #333);
}
Download my free CSS Handbook
The 2021 JavaScript Full-Stack Bootcamp will start at the end of March 2021. Don't miss this opportunity, signup to the waiting list!
More css tutorials:
- The Flexbox Guide
- CSS Grid Tutorial
- CSS Variables (Custom Properties)
- Introduction to PostCSS
- The CSS margin property
- How to center an element with CSS
- CSS System Fonts
- How to print your HTML with style
- An introductory guide to CSS Transitions
- A CSS Animations Tutorial
- Introduction to CSS
- The CSS Guide
- How to setup Tailwind with PurgeCSS and PostCSS
- The Tailwind Cheat Sheet
- How to continuously rotate an image using CSS
- Making a table responsive using CSS
- How to debug CSS by bisecting
- CSS Selectors
- CSS Cascade
- CSS Specificity
- CSS Attribute Selectors
- CSS Colors
- CSS Units
- CSS url()
- CSS Typography
- The CSS Box Model
- The CSS position property
- CSS Media Queries and Responsive Design
- CSS Feature Queries
- CSS Transforms
- How to style lists using CSS
- CSS Vendor Prefixes
- CSS Inheritance
- CSS Pseudo Classes
- CSS Pseudo Elements
- Styling HTML Tables with CSS
- The CSS Display property
- The CSS calc() function
- CSS Borders
- Importing a CSS file using @import
- CSS Error Handling
- CSS Filters
- CSS Box Sizing
- CSS Backgrounds
- CSS Comments
- CSS Fonts
- CSS Padding
- The CSS float property and clearing
- CSS Normalizing
- The CSS z-index property
- How to disable text selection using CSS
- How to put an item at the bottom of its container using CSS
- How to invert colors using CSS
- Responsive pre tags in CSS
- Responsive YouTube Video Embeds
- What are good CSS Breakpoint values for Responsive Design?
- How to align center in flexbox