Things I Learned from Learn to Code HTML & CSS, Lesson 7

Here are some things I learned from Lesson 7: Setting Backgrounds & Gradients of Learn to Code HTML & CSS by Shay Howe.

Adding a Background Color

Transparent Backgrounds

When using an RGBa or HSLa value as a transparent background color, it’s a good idea to provide a fallback color, too, because not all browsers recognize RGBa or HSLa values.

We can use two background-color properties within a single rule set, the first of which will use a “safe” background color, and the second of which will use a RGBa or HSLa value.

Adding a Background Image

Background Repeat

By default, a background image will repeat indefinitely, both vertically and horizontally, unless otherwise specified.

The background-image property accepts four different values: repeat (default), repeat-x (repeat horizontally), repeat-y (repeat vertically), and no-repeat.

Background Position

The background-position property requires two values: a horizontal offset and a vertical offset (from the left top corner). If only one value is specified, that value is used for the horizontal offset and the vertical offset will default to 50%.

To set a value, we can use the top, right, bottom, left, and center keywords, pixels, percentages, or any length measurements. For example, background-position: right top equals background-position: 100% 0.

Shorthand Background Image Values

For example:

div {
  background: #b2b2b2 url("alert.png") 20px 10px no-repeat;

Designing Gradient Backgrounds

Gradient backgrounds are treated as background images. We can create a gradient using the background or background-image property.

Changing the Direction of a Gradient Background

By default, linear gradient backgrounds move from the top to the bottom of an element.

If we want a gradient to move from the left to the right, we can use background: linear-gradient(to right, startColor, endColor). Keyword values may also be combined. If we want the gradient to move from the left top to the right bottom, we can use the keyword value to right bottom.

When we use a diagonal gradient on an element that isn’t exactly square, the background gradient will not proceed directly from one corner to the other. Instead, the gradient will identify the absolute center of the element, place anchors in the perpendicular corners from where it should progress, and then move to the general direction of the corner stated within the value. These perpendicular corners are called “magic corners”, as they are not absolute.

Radial Gradient Background

Instead of using the linear-gradient() function, we’ll use the radial-gradient() function.

Radial gradients work from the inside to the outside of an element.

Using Multiple Background Images

With CSS3, we can use more than one background image on an element by comma-separating multiple background values.

The background image value that comes first will be the foremost background image, and the background image that’s listed last will be the rearmost background image.

You can use either the shorthand background property or break the values up into comma-separated values across the background-image, background-position, and background-repeat properties.

Exploring New Background Properties

CSS3 Background Size

The background-size property accepts a few different values, including length and keyword values.

We can specify a width and a height value by using two space-separated values. Percentage values are in relation to the element’s size, not the background image’s original size.

If a second value isn’t identified after the width, the height value will be automatically set to preserve the aspect ratio of the background image.

The keyword value auto may be used as either the width or height value to preserve the aspect ratio of the background image.

Cover & Contain Keyword Values

The cover keyword value specifies that the background image will be resized to completely cover an element’s width and height. The original aspect ratio will be preserved, so often part of the background image is cut off in order for the image to occupy the full space of the element.

The contain keyword value specifies that the background image will be resized to reside entirely contained within an element’s width and height. The original aspect ratio will be preserved, so often the background image will not occupy the full space of the element.

Both these keyword values may result in slightly distorted background images.

CSS3 Background Clip & Background Origin

The background-clip property specifies the surface area a background image will cover, and the background-origin property specifies where the background-position should originate. These two properties correspond with the keyword values border-box, padding-box, and content-box. Each of these three values may be used for the background-clip and background-origin properties.

The background-clip property value is set to border-box by default. Meanwhile, the background-origin property value is set to padding-box by default.

Leave a Reply

Your email address will not be published. Required fields are marked *