Web_Dev_Grad

In web design, the background of a webpage or HTML element plays a huge role in the look and feel of a site. From solid colours to layered images and gradients, backgrounds can help guide user focus, enhance visual appeal, and contribute to branding. They can be applied to most elements, but I usually apply them to individual containers or divs along with the page background of the body or main element.

A thoughtfully designed background can enhance visual hierarchy, reinforce branding, improve readability and accessibility, or create immersive user experiences. However, overuse of heavy images or bright colours can also clutter your design or slow down page performance. Always try to balance aesthetics with usability.

The background-color property sets the background colour of an element. You can use any of the colour values covered in the colours in web design section (named colours, hexadecimal colours, RGB values, HSL values) and the transparent special keyword.

#example-div {
	background-color: black;
}

The background-image property allows you to set an image as the background of an element by supplying the image url.

.div {
	background-image: url('image.jpg');
}

You can include multiple background images by separating each with a comma.

.div {
	background-image: url('image1.jpg'), url('image2.jpg');
}

Other than a saved image, you can also use gradients for background images.

.div {
	background-image: linear-gradient(to right, red, yellow);
}

Always pair background-image declarations with a background-color declaration to act as a fall-back in case the image does not load.

With the image or colour scheme chosen for the background, you can define how it will repeat with the background-repeat property. This can take the values of repeat, repeat-x, repeat-y, or no-repeat. I generally set this to no-repeat for my needs.

The size of the background image can be set with background-size. It can be set to auto, which keeps the image at its original size, cover, which scales the image to fully cover the background area (and may crop parts), or contain to scale the image to fully fit within the area (which may leave empty space). Alternatively you can provide actual sizes using pixels or percentages.

.div {
	background-size: 100% 50%;
}

Finally you can use the background-position property to define the starting position of the background image within the element with values of left, right, top, bottom, or center and combinations of these such as top left.

For example you could have a background rule for a div looking like:

#example-div {
	background-image: url('image.jpg');
	background-color: blue; /* Fallback colour in case image does not load */
	background-repeat: no-repeat;
	background-size: cover;
}

Have you noticed how sometimes on websites when you scroll down, the background image scrolls too? This can be achieved with the background-attachment property. The values it can take are:

• scroll The background moves with the content. This is the default value.
• fixed The background stays fixed in place as content scrolls.
• local The background scrolls with the element's content, not the page.

The fixed setting is often used to create parallax scrolling effects, where content moves over a stationary background.

Instead of writing each background property separately, you can use shorthand notation to define it all under one background parameter.

.div {
	background: #FFF url('image.jpg') no-repeat center/cover fixed;
}

This single line sets:

• background-color: #FFF
• background-image: 'image.jpg'
• background-repeat: no-repeat
• background-position: center
• background-size: cover
• background-attachment: fixed

The order of shorthand values doesn't matter unless two properties share the same space, like background-position and background-size, in which case they're separated by a /.