4.9 KiB

Raw Blame History

Understanding Background Images And Images

Understanding `background-size`

The background: url(""); property we have been using is actually a shorthand and can be replaced with background-image: url("");.

We can also use background-color to set a solid color.

For sizing, we can use the background-size property, which takes in a couple of values. If we set background-size: 100px to a fairly larger element, the image will be repeated.

We can disable the repeatition of image using the background-repeat property, we can assign it no-repeat to remove the repeatition, or we can use the other possible values repeat-x and repeat-y, to repeat the imaage horizontally or vertically.

If you only assign a single value to background-size property, which is the width of the image, the height will be set automatically to maintain the aspect ration of the image. or you can assign both, width and height, e.g. background-size: 300px 100px;.

We can also use auto (default, keeps the aspect ratio), cover (fills the entire container), contain (entire image is visible, can leave white space), % and other units with the background-size property. e.g. setting background-size: 50% will make the image take 50 percent of the element's width.

Working With `background-position`

Excess parts of the image, that are cut-off for a larger image than the container, can be controlled using the background-position property. That is, you can decide which side of the excess image to crop. We can also control the absolute positioning of the image inside the container.

We can see the available usage of the this property on its MDN reference.

Theory Time - `background` Shorthand

backgound-image (Set one or more background images)
backgound-color (Set a background color)
backgound-position (Set initial position, relative to background position layer)
backgound-size (Set size of background image)
backgound-repeat (Defines how background images are repeated)
backgound-origin (Set background positioning area)
backgound-clip (Define whether background extends underneath border)
backgound-attachment (Sets the scrolling behavior of the background image)

Using The `background` Shorthand

background: url("a.jpg") left 10% bottom 20%/cover no-repeat border-box padding-box;

Styling Images

The default behavior is when you add an <img> tag and set an image, the width and height of the <img> will be same as of the width and height of the original image. Changing the width and height of the container element doens't have any effect on the size of <img>.

Changing lets say height of the <img> to 100% will not change it height to fill the container, but it'll change its height to that of the original image used, unless the container is an inline or inline-block.

Working On The Image Layout

<main>
    <div>
        <div class="testimonial" id="customer-1">
            <div class="testimonial__image-container">
                <img src="../images/customer-1.jpg" alt="Mike Statham - Customer" class="testimonial__image">
            </div>
            <div class="testimonial__info">
                <h1 class="testimonial__name">Mike Statham</h1>
                <h2 class="testimonial__subtitle">Founder of
                    <a href="tech-analysis.com">tech-analysis.com</a>
                </h2>
                <p class="testimonial__text">uHost helped me realize my project with a highly constrained budget in like no time.</p>
            </div>
        </div>
        ...
    </div>
<main>

.testimonial__image-container {
    width: 65%;
    display: inline-block;
    vertical-align: middle;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
}

.testimonial__image {
    width: 100%;
    vertical-align: top;
}

Understanding Linear Gradients

Gradients, both linear and gradial, are treated as images. We add a linear gradient by using the linear-gradient() css function on background-image or background shorthand properties.

Applying Radial Gradients

We add radial gradient using the radial-gradient() css function.

Stacking Multiple Backgrounds

Using the shorthand background property, we can stack multiple backgrounds separated by a comma ,. You can only set the background-color property once when stacking multiple backgrounds.

background: linear-gradient(to top, rgba(80, 60, 18, 0.6) 10%, transparent), url("image.jpg") left 10% bottom 20%/cover no-repeat border-box, #ff1b68;

Understanding Filters

Filters allow us to change the visual appearence of an element by applying a filter like blurring, grayscale or changing the contrast etc:

div {
    background: brown;
    filter: blur(10px);
}

Adding And Styling SVGs - The Basics

...

4.9 KiB Raw Blame History