How to make a background image responsive

Question

I just created a simple coming soon page with a background-image using css:

body{
   background-image: url(FreeVector-Fresh-Beer.jpg);
   background-repeat: no-repeat;
   background-size: cover;  
}

Here the html:

<figure>
        <img class="img-responsive" src="Craft-Beer-SA-min.png" alt="Chania">
</figure>
<div class="paragraph" style="font-size:50px">
    <p>Our Website Is Brewing ! ! ! </p>
    <p>Coming To A Browser Near You. . .<br><a href="">info@craftbeersa.co.uk</a></p>           
</div>

How can I make this background image responsive?

Responsive in what context?Is it viewing of images on different screens or applying animations? — bhanu.cs, Aug 10 '16 at 11:08
When you search on Google: `reposnsive background image full screen` you get [this](https://css-tricks.com/perfect-full-page-background-image/). Please search before you ask. — Mosh Feu, Aug 10 '16 at 11:09
try google or a search engine of your choice. StackOverflow search should do as well — iomv, Aug 10 '16 at 11:09
Possible duplicate of [Full-screen responsive background image](http://stackoverflow.com/questions/16548338/full-screen-responsive-background-image) — 3rdthemagical, Aug 10 '16 at 11:22

score 2 · Answer 1 · answered Aug 11 '16 at 11:31

html:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>CraftBeerSa</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="main.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div class="text">
        <img src="Craft-Beer-SA-min.png" alt="">
        <div class="info">
            <p>WEBSITE COMING SOON</p>
        </div>
    </div>
</body>
</html>

CSS:

body{
    background-image: url(FreeVector-Fresh-Beer.jpg);
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
    -wekit-background-attachment: fixed;
    -o-background-attachment: fixed;
    -moz-background-attachment: fixed;
}
.text{
    text-align:center;
}
img{
    margin-top:10%
}
.info{
    margin-top: 5%;
}
div p{
    font-size:5vw;
    color:#996633;
}


@media only screen and (max-width: 500px){
    .text img{
        width:100%;
    }
    img{
    margin-top:50%
    }
    .info{
        margin-top: 10%;
    }   
}

This solves absolutely everything.

score 1 · Answer 2 · answered Aug 10 '16 at 11:07

1

Try this

background-size:100% auto;

answered Aug 10 '16 at 11:07

Prasath V

1,336
4
20
39

Sorry I forgot to mention what I tried before.The background-size:100% only works for the width. – Elton Sousa Aug 10 '16 at 11:09
So image height is your problem? – Prasath V Aug 10 '16 at 11:11
Yes. Apparently background-size:100% is better for the width though. Just the height. I can see that is not 100%. part of the image is hidden and I only see it in medium screens. Then in small screens,the image height does not cover the entire screen. – Elton Sousa Aug 10 '16 at 11:16
You have to use the media queries `@media only screen and (max-width:767px)` ... This one is for mobile screens... Use height value in pixels.. Ex.. `height:300px;` .. It doesn't work means use `max-height`... – Prasath V Aug 10 '16 at 11:18

Vishal Panara · Answer 3 · 2016-08-10T11:14:06.160

0

body{    
    background: #222 url('FreeVector-Fresh-Beer.jpg') center center no-repeat;
    background-size: cover;
    height: 100%;
}

Try the above code.

edited Aug 10 '16 at 11:14

answered Aug 10 '16 at 11:10

Vishal Panara

746
4
19

It works for the height. But I see that in small screens it hides the image content in terms of width. – Elton Sousa Aug 10 '16 at 11:19
@EltonSousa It happens in coming soon pages, you can refer yourself http://webthemez.com/demo/coming-soon-responsive-web-template-trendset/ and http://bootstraptaste.com/demo/themes/WeBuild/ – Vishal Panara Aug 10 '16 at 11:28

Juan Ferreras · Answer 4 · 2016-08-10T11:27:48.413

You can directly apply your background to the html element and use background-size: cover to assure it covers the whole area leaving no gap.

html { 
  background: #222 url('FreeVector-Fresh-Beer.jpg') no-repeat center center fixed; 
  background-size: cover;
}

Otherwise, you can make sure you declare height: 100% on your body tag, so body takes the full height of the browser too and apply the background there instead.

body { 
  background: #222 url('FreeVector-Fresh-Beer.jpg') no-repeat center center fixed; 
  background-size: cover;
  height: 100%;
}

Background-size: cover assures that the whole will be covered without expanding or stretching your image; naturally that means parts of your image will be hidden. However, if you want to simply expand it, that is, stretch it, to take the full area, you may use background-size: 100% 100%.

In general you want to use cover and you may decide what area remains visible through background-position (which is center, center) on my answer in the shorthand property (so you always would see the center, vertically and horizontally) but it could be:

Horizontally: left | right | center
Vertically: top | bottom | center

.It works for the height. But I see that in small screens it hides the image content in terms of width. — Elton Sousa, Aug 10 '16 at 11:19
I've updated my answer. Naturally if you don't stretch it, your image will need to get cropped which means some areas will be no longer visible. You can control that through background-position values. — Juan Ferreras, Aug 10 '16 at 11:29

How to make a background image responsive

4 Answers4