Is this a good way to use background image? How do you use them/when is it better to use img tag?

Question

Hey guys,

just a quick one:

So I often get confused on what the best way to use background images for responsive design. They look great at desktop but then cut off the best bits of the image at mobile.

I've done a quick test and found a good solution it seems using 'background: 100% auto;' to begin with then cover at larger screens.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style media="screen">
    .image-test {
        height: 600px;
        background: url('http://www.lorempixel.com/1200/600') no-repeat;
        background-size: 100% auto;
    }

    @media (min-width: 1200px) {
        .image-test {
            background-size: cover;
        }
    }
</style>
<body>
    <div class="image-test">
    </div>
</body>
</html>

Is this how you do your background images for best responsive scale? Use media queries and use background 100% auto or another way?

What size aswell? Considering the screen could be any width what size is good particularly for slideshow images?

Also what is your approach to deciding between a background image and a normal image?

Would you ever use a normal image on a full width slideshow? Why is it better to have background images?

When is it better to use normal img tags?

I'm really interested to hear your thoughts!

Cheers!

Answer 1 · 2016-03-06T22:35:13Z

March 6, 2016 10:35pm

Images placed inside img tags (with alt text) are used when they are relevant for the content (for example, for seo purposes). Images placed as background-image won't be found by google and won't help in the seo of your page at all.

Other use of images inside img tags is for printing. An image placed this way will automatically be printed as it is part of the content.

Images placed by css should be used when they are not part of the content, for full-width images (background-size:cover;), and when you don't want the image to be printed.

Of course you still can use a full-width image inside an image tag, but I found this way to be easier to handle. Hope it helped.

Cheers

Welcome to the Treehouse Community

Looking to learn something new?

Joe Consterdine

Joe Consterdine

Is this a good way to use background image? How do you use them/when is it better to use img tag?

1 Answer

Sebastian Beltran

Sebastian Beltran