7 CSS Background Properties to Liven Up Your Web Designs
The background theme of your website can significantly affect its look and feel. Colors, images, and background patterns invoke emotion and create great user experiences.
You can use CSS background properties to set the background style of HTML elements. Learn all about some of the CSS properties you can use to create excellent backgrounds.
1. background-color
Thebackground-color propertysets the color of the background of an element. You can set the color using a name like “red”, a HEX value like “#00FF00” or an RGB value - like “rgb(0, 255, 0)”. You can also use an HSL value to set the background color using hue, saturation, and lightness.
The following example sets the background color of the whole page to orange. The heading elements each get a different background.
Using CSS, you can apply a unique background color to each element:
This will style the page to look like:
You can use the opacity property to determine the transparency of an element. Opacity takes values between 0.0 and 1.0. The lower the value, the more transparent the element is.
As an example, try setting the opacity of a body element to 0.5:
This will display as follows—compare the colors to those in the previous screenshot:
2. background-image
The background-image property sets an image as the background of an element. you could reference a local image or one from the internet.
The CSS file:
This will display like so:
You can also usebackground gradientsto create a unique look for your application.
3. background-repeat
The background-image property repeats images by default. you may choose to repeat the image horizontally on the x-axis or vertically on the y-axis.
Alternatively, if a repeat does not suit your style, you can remove it using the valueno-repeat.
Use the following CSS to apply a repeating background along the x-axis:
The result:
Next, try repeating the image on the y-axis:
The example on the y-axis certainly looks distorted. If these are not the patterns you are looking for, you can specifyno-repeatinstead:
4. background-position
The background-position property defines the position of the background image within its element. It uses position-specific keywords likecenter,top,andbottom, or a pixel or percentage value.
Add a background-position property to the last image:
It will look like this:
You can see the image distorts the look of the website. Let’s fix that with the next property.
5. background-size
You can use the background image property to define a specific size for the image. It uses keywords likecoverandcontainor a pixel or percentage value. Let’s fix the distorted background image by adding a background-size property.
The result shows that the image now covers the webpage proportionally.
6. background-attachment
The background-attachment property defines whether the background image position remains fixed or scrolls. You can use the keywords fixed or scroll.
Let’s show that in the following code:
If you move down the page, you will notice the background does not move:
To demonstrate the scroll background-attachment property, change the keyword toscroll.You will notice that now the background moves with the text.
7. The background Shorthand Property
You may notice that you need to include several properties to get the perfect background. This involves writing a lot of code. But you can shorten the code using the background shorthand property.
The shorthand property allows you to set many background properties in a single line. You use the keywordbackgroundto set the shorthand property.
For example, instead of writing code like this:
You can write it in a single line, like this:
The shorthand property follows a particular order. You must align the properties in that order even if one or more is missing. The order is:
You can create interesting designs with CSS using variousbackground patterns. With these patterns, you can achieve unique and outstanding backgrounds for your website.
Other Background Properties in CSS
CSS is powerful and there’s a lot you can do with it to spice up your application. You can use properties like background-clip, background-origin, and background-blend-mode to add some animation.
You can also use gradients and patterns to customize your pages. Experiment with CSS background properties to sharpen your web design skills.
Bland boxes look boring. Spruce them up with the CSS box-shadow effect!
These films will leave you questioning humanity, but also wanting more.
Your phone is a better editor than you give it credit for.
Your phone’s camera app doesn’t show this, so it’s easy to miss.
This small feature makes a massive difference.
Goodbye sending links via other apps.
