Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Ryan Decker
Ryan Decker
3,451 Points

Responsive background image.

What is the best method to have a background image that spans the entire width of the screen AND is responsive?

Not looking for the entire background to be a cover.

Looking for it to be more like a .jumbotron like in a bootstrap file.

Basically I just wan't some text on top of an image that goes across the page and is responsive.

Here are a few examples of what I have tried that doesn't work:

#cover p {background: url('../img/photo.jpg') no-repeat;
width: 100%;
height: 300px;}

#cover p {background: url('../img/photo.jpg') no-repeat;
width: 100%;
height: 100%;}

#cover p {background: url('../img/photo.jpg') no-repeat;
min-width: 100%;
min-height: 100%}
Gianni Zamora
Gianni Zamora
9,547 Points 
<div id="wrapper">
  <div id="cover">
    <p>Hallo</p>
  </div>
</div>

#wrapper {
width:100%;
height:300px;
}
#cover {
background: url('../img/photo.jpg');
width:100%;
height:100%;
}

make sure to have it in a wrapper + plus the p cannot have background image. Only the div which i think is your intention.

2 Answers

Gianni Zamora
Gianni Zamora
9,547 Points
Gianni Zamora
Gianni Zamora
9,547 Points

:)

Ryan Decker
Ryan Decker
3,451 Points

I copied and pasted your code in. It worked with getting the image to span the entire width of the page, but it was not responsive :(

Gianni Zamora
Gianni Zamora
9,547 Points

so if the width is reaching 100% the image should be responsive in sizing when the browser window is closed in and out. However the height of the image will initially be big but once you start resizing your window down you have to add media queries to your css for specific breakpoint responsiveness. make sure you do not have image:cover or anyother thing like that;

Gianni Zamora
Gianni Zamora
9,547 Points

http://jsfiddle.net/s12nx7wL/2/

Marcus Parsons
Marcus Parsons
15,719 Points

Gianni,

The problem with what you're saying is that the width of the element doesn't apply to the background when it's an image, it only applies to the content itself. Setting the width to 100% will not stretch the background unless it is a color or gradient. You have to use the background-size property to stretch the background if it is an image.

You are correct about using media queries for break point responsiveness, but that's only for if you need to manipulate the layout of the page itself to better fit smaller or larger resolutions.

There is no such property in CSS as "image". You must be referring to background-size because "cover" is a value that background-size can have.

Ryan Decker
Ryan Decker
3,451 Points
Ryan Decker
Ryan Decker
3,451 Points

Marcus Parsons here I am again! Think you can help me tackle this one? Basically want to make a background image take up the full width (not height) of the page and have it be responsive. Would also like to have some text over top of it to be responsive too!

Marcus Parsons
Marcus Parsons
15,719 Points

There are a few different ways to do this, Ryan. Anytime you are dealing with a background image, you need to deal in background properties, not standard width and height properties. width and height (including min and max width and height) only deal with the content on the page, not with any background, so changing the width and height of a paragraph, for example, will not change the size of the image in the background.

Also, responsiveness comes from using responsive units i.e. %, em, rem, etc. or responsive keywords such as auto or cover. However, when dealing with the background-size property, auto sets the background image to its default resolution, which is mostly not ideal.

In order to do change the size of the image in the background, you have to use the background-size property.

Now, to get down to what you're trying to do, if you place any more p elements within whatever element has the ID of "cover", you can add a background to the "#cover" element, and any paragraphs you create will have the background stretch to fit them.

Doing something like the following will apply a responsive background (that spans the entire width of the screen and the height of the content) to the #cover element and cover any elements placed within #cover with a background, as well:

#cover {
background-image: url('../img/photo.jpg');
background-repeat: no-repeat;
/* First value sets width, second sets height */
/* 
Keep in mind that when it comes to background size and using 100% 100%, the width will span the entire length of the viewport, but the height will only span the current height of the content.  This will create a banner type, jumbotron effect.
*/
background-size: 100% 100%;
}
Ryan Decker
Ryan Decker
3,451 Points

Problem almost solved.

The background image is now displayed behind the text and is responsive. BUT it is not scaling proportionally when I resize the browser window.. Here's a link to the photo I am using:

http://static.panoramio.com/photos/large/68553634.jpg

Heres my HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Ryan Decker|Designer</title>
    <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
  </head>
<body>
<div id="cover">
    <div id="text">
        <h1>I am trying to put am image behing this text.</h1>
        <h2> I would also like the image to be behind this text.</h2>
        <p> Once the image is behind the text, I want it to span the width of the page and have both the text and image be responsive.</p>
    </div>
</div>

</body>
</html>

Here's my CSS:

#text {color: white;
margin: 0px 10px 20px 30px;
padding: 30px 0px 30px 30px;}

#cover { width: 100%;
    min-height: 300px;
margin: 0;}

#cover {background: url('../img/sline.jpg');
        background-repeat: no-repeat;
        background-size: 100% 100%;}

Maybe I am just jumping ahead of myself since I haven't even delved into the CSS layouts. But, now you see what I am trying to accomplish. I'm sure there is a CSS framework or grid that would make doing this MUCH easier.

Thanks as always!

Marcus Parsons
Marcus Parsons
15,719 Points

What do you mean by scaling proportionately? I know it scales with the browser viewport because I've tested this many times. I even did it just now with your pic to make sure I wasn't crazy. And thankfully, I'm not...just yet! :D If you watch the background while you resize the window, you'll see that it does scale proportionately. % units always scale with the page.

Btw, I was slightly wrong about width and height's affect on the background image. If you're using 100% for the values of background size, they are going to stretch to the edge of the content. So, they do have an effect when using those values. My mistake!

Ryan Decker
Ryan Decker
3,451 Points

When I make the window smaller, the image compresses and distorts. Like instead of scaling down proportionally it just squishes the image so it fits the 100% height and 100% width.

Look what happens when you use this CSS instead (I removed the "height 100%" from the background size property):

#text {color: white;
margin: 0px 10px 20px 30px;
padding: 30px 0px 30px 30px;
}

#cover { width: 100%;
    min-height: 300px;
margin: 0;}

#cover {width: 80%;
    height: 467px;
        background: url('../img/sline.jpg');
        background-repeat: no-repeat;
        background-size: 100%}

The image doesn't get squished when you make the viewport smaller. BUT now the text won't fit properly.

Marcus Parsons
Marcus Parsons
15,719 Points

The problem is with the image itself. Take a look at the dimensions of your picture. It is 1024 x 467 (width by height). It is going to look fantastic at a resolution of 1024 x 768 for a width or a bit bigger. It's going to be a bit stretched lengthwise at that resolution though because 768 > 467 and so the pixels must stretch to those bounds. Now, the reason why you are seeing the image compress like that is that the image is getting compressed.

I haven't seen any websites be able to successfully use a single image for a background that will look perfect on all screen resolutions. Any websites I've seen with a jumbotron like banner have used colors, whether they're solid colors or gradients, for their background. It's for the same reason you don't see huge pictures being used as backgrounds on websites. It's not practical.

If you're intent on using an image for your banner, though, I would take the source file and make copies of it at different resolutions and then use media queries to insert the appropriate image at the appropriate widths. You'd probably really need only about 4 of them for (468px, 768px, 1024px, 1280px widths). It's going to result in a slower website, though, as each of those pictures have to be downloaded and cached. You could use some JavaScript to determine which one to download, but I still feel it's just unnecessary.

I don't want to disappoint you, my friend, but you're likely much better off going with a solid or gradient color background because that will scale and look fantastic no matter what.