CSS — P6: Image Styling

Posted 3 months ago by Dino Cajic

CSS — P6: Image Styling

Make every image pop with CSS finesse

Just like with any styling with CSS, we can start writing and never finish since there are so many unique ways that individuals can style an image. We’ll cover a few basic ways to style an image, which is what you’ll really want to see, and a couple of ways to style background images in the end.

Basic Image Styling

Let’s start by including an image into our HTML file.

<section>
    <img src=”st-augustine-trip.jpg” alt=”St. Augustine Trip”>
</section>

This will display the image with its current height and width.

To set the height and width of an image, we’ll apply the height and width properties.

img {
    height: 200px;
    width: 300px;
}

You might have noticed that the current height and width values distort the image. For the image to retain its natural proportions, we can add either the width or the height property, but not both.

img { height: 200px; }

We can also add a border to the image by applying the border property.

img {
    height: 200px;
    border: 5px cornflowerblue solid;
}

We can even change the square image into a circular one by adjusting the border radius.

img {
    height: 200px;
    border-radius: 50%;
}

By reducing the radius, we can instead convert the square image into one with rounded corners.

img {
    height: 200px;
    border-radius: 20px;
}

Background Adjustments

To begin, let’s create the full height banner with a centered inner div element.

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        * {
            margin: 0;
        }

        .banner {
            background-color: deepskyblue;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .inner {
            background-color: salmon;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div class="banner">
        <div class="inner">
            <h1>Banner</h1>
            <p>Some banner slogan</p>
        </div>
    </div>
</body>

</html>

Let’s modify the background color from blue to an actual image. I’m going to get an image from Pixabay.

 

Remove the background-color property and replace it with the background property. Point the url to the path where the image is saved. Since my image is in the same folder as my file, I can just add the image name to the url() function.

 

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        * {
            margin: 0;
        }

        .banner {
            background: url("sun.jpg");
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .inner {
            background-color: salmon;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div class="banner">
        <div class="inner">
            <h1>Banner</h1>
            <p>Some banner slogan</p>
        </div>
    </div>
</body>

</html>

If I resize the browser, it’s actually showing the top left of the image. I want it to resize around the center of the image. We can achieve that with the background-position property.

 

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        * {
            margin: 0;
        }

        .banner {
            background: url("sun.jpg");
            background-position: center;

            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .inner {
            background-color: salmon;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div class="banner">
        <div class="inner">
            <h1>Banner</h1>
            <p>Some banner slogan</p>
        </div>
    </div>
</body>

</html>

This works out great if the image is large, but what if the image is not that large? Let’s take a look at a smaller version of this image.

 

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        * {
            margin: 0;
        }

        .banner {
            background: url("sun-small.jpg");
            background-position: center;

            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .inner {
            background-color: salmon;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div class="banner">
        <div class="inner">
            <h1>Banner</h1>
            <p>Some banner slogan</p>
        </div>
    </div>
</body>

</html>

It doesn’t quite look like we envisioned. Most of the time, we just want to stretch the image to fill up the space. Let’s start by getting rid of the repeating. We’ll set the background-repeat property to no-repeat.

 

Unfortunately we now have a bunch of white-space around it. The reason that it’s in the center of the screen is because of the background-position property that was set earlier to center. Let’s stretch the image to fill up the space of the container. We can do that by setting the background-size property to cover.

Depending on your screen resolution and image quality, the image might look blurry. How blurry is acceptable? That’s for you to decide.

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        * {
            margin: 0;
        }

        .banner {
            background: url("sun-small.jpg");
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;

            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .inner {
            background-color: salmon;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div class="banner">
        <div class="inner">
            <h1>Banner</h1>
            <p>Some banner slogan</p>
        </div>
    </div>
</body>

</html>

Banner Image Fixed while the text is moving

Have you ever seen those pages where you start scrolling down and the image is fixed while the text is moving for that particular section? It’s again pretty simple to achieve. Let’s create a page with three div elements.

  • The first and third div will have a salmon background color while the second div will have a background image. The background image is just to help visualize this process even further.
  • Each div will also have a p tag with some text inside of it. The p tag will be blue and will have some padding.
  • Each div will be 100vh in height.
  • Each p tag inside of each div will be centered on the screen.

We’ve done all of this before. There shouldn’t be anything that frightens you.

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        * {
            margin: 0;
        }

        p {
            background-color: skyblue;
            padding: 20px;
        }

        .banner, .banner-fixed {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .banner {
            background-color: salmon;
        }

        .banner-fixed {
            background: url(sun.jpg);
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
        }
    </style>
</head>

<body>
    <div class="banner">
        <p>Banner</p>
    </div>

    <div class="banner-fixed">
        <p>Banner Text Moves</p>
    </div>

    <div class="banner">
        <p>Banner</p>
    </div>
</body>

</html>

For those of you panicking, let’s walk through the CSS quickly. Any time that a property repeats between the div’s, I separated it out. For example, we’re going to set the height to 100vh for both the banner and banner-fixed classes, so I grouped them. Everything else should be self explanatory.

Let’s see what happens when we scroll down the page.

So far it behaves like a normal webpage that we’re used to seeing. The content and the background image of the second div move together. Let’s change that by fixing the background image of the second div while the content moves. We can achieve that by setting the background-attachment property to fixed.

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        * {
            margin: 0;
        }

        p {
            background-color: skyblue;
            padding: 20px;
        }

        .banner, .banner-fixed {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .banner {
            background-color: salmon;
        }

        .banner-fixed {
            background: url(sun.jpg);
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
        }
    </style>
</head>

<body>
    <div class="banner">
        <p>Banner</p>
    </div>

    <div class="banner-fixed">
        <p>Banner Text Moves</p>
    </div>

    <div class="banner">
        <p>Banner</p>
    </div>
</body>

</html>

Making Background Image Darker

If you have a banner image and you want the text to pop, you may want to darken the background image. To achieve this, let’s create a banner and add some text to it. We’ll center the text using flex and will make the font white and bold. This will actually look pretty decent.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        * {
            margin: 0;
        }

        .banner {
            height: 100vh;
            background: url(sun.jpg);
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            
            /* Font styling and centering */
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 50px;
            font-weight: bold;
            color: white;
        }

    </style>
</head>
<body>
    <div class="banner">
        Some text
    </div>
</body>
</html>

If we want to make the image slightly darker, we can apply a linear gradient with 50% opacity to start with and increase it or decrease it from there. The linear gradient is applied to the background property.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        * {
            margin: 0;
        }

        .banner {
            height: 100vh;
            background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(sun.jpg);
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            
            /* Font styling and centering */
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 50px;
            font-weight: bold;
            color: white;
        }

    </style>
</head>
<body>
    <div class="banner">
        Some text
    </div>
</body>
</html>

Fitting Image to Container

You might have run into this issue before. You have a container and you have an image inside of the container. The image is too large for the container so it escapes out of the container.

We can use the overflow property and set it to hidden. To center the image, we can use flex.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        div {
            height: 150px;
            width: 150px;
            border: 2px solid red;
            
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
    <div>
        <img src="sun.jpg" alt="">
    </div>
</body>
</html>

Conclusion

Well, went a little overboard with image styling. Like I said, you can start writing about it and never finish. I had to finally just stop in order to end this article. See you in the next one.

 

 CSS Series

Continue your CSS Learning.

CSS — P5: Text Styling

Type that tells your story

CSS — P5: Text Styling

Part five of our CSS fundamentals series turns plain text into polished prose. Adjust font families, weights, line heights, letter spacing, shadows, and responsive clamp sizes while balancing readability, branding, and performance.

CSS — P6: Image Styling

CSS — P6: Image Styling

CSS — P6: Image Styling

Part six of our CSS fundamentals series reveals how to elevate images with pure CSS—think border-radius masks, object-fit cropping, graceful aspect-ratio boxes, subtle filters, box-shadows, and hover transforms that feel alive, all while staying responsive across viewports.

CSS — P7: Element Types and Floating Elements

Master flow with display types and floats

CSS — P7: Element Types And Floating Elements

Part seven of our CSS fundamentals series unpacks how element display types—block, inline, inline-block—shape normal flow, then dives into floating elements for classic side-by-side layouts. Learn float behavior, clear fix hacks, and modern flex/grid upgrades while keeping legacy pages tidy.

Leave a Reply