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 Unused CSS Stages Media Queries Adaptive Layouts with Media Queries

fitrobotic
fitrobotic
1,290 Points
Posted by fitrobotic
fitrobotic
1,290 Points

Making an image responsive

Hi

I can't seem to get a background image on the home page of a site to respond when I decrease the browser size.

Here is my HTML code:

<body class ="weightroom" style=max-width: 100%; height: auto;>

CSS:

.weightroom { background: url('../img/mirror-pic.jpg'); background-repeat: no-repeat;

}

I'm not sure what is going wrong. Thanks.

5 Answers

Keith Kelly
Keith Kelly
21,326 Points
Keith Kelly
Keith Kelly
21,326 Points

A couple comments:

  1. I would remove the style property from the body as it is better to use a separate css file for styling. You really don't need the class name in the body either since there will only ever be one body tag in your markup.
  2. The HTML has a couple syntax errors including a space between class and the equals sign.
  3. If you are attempting to use a background image for the entire background of your site you may want to use the background-size property and set that to cover. That will make the background as large as possible so the background completely covers your site.

Here is an example of the code from css tricks that is a really nice solution:

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Let me know if this helps!

fitrobotic
fitrobotic
1,290 Points
fitrobotic
fitrobotic
1,290 Points

Thanks Keith. I used a class because I want the image on the home page only.

Keith Kelly
Keith Kelly
21,326 Points
Keith Kelly
Keith Kelly
21,326 Points

OK, understood. You should be able to use the same code above still. If you want to take a look at the original article you can see it here. There are a few more solutions listed as well.

fitrobotic
fitrobotic
1,290 Points
fitrobotic
fitrobotic
1,290 Points

The way I wrote my code the image is in the CSS... I don't know if the code above will work if I just want the image for the homepage only.

Keith Kelly
Keith Kelly
21,326 Points
Keith Kelly
Keith Kelly
21,326 Points

If you want to keep the structure of code the way you have it then you will need to correct the space between the class and equals sign. I would still get rid of the inline style and place that code in the css. I would also still recommend using the background-size property.

<body class="weightroom">

.weightroom { 
  background-image: url('../img/mirror-pic.jpg'); 
  background-repeat: no-repeat; 
  background-position: center;
  background-attachment: fixed;  /* Will prevent image from scrolling */
  background-size: cover;  /* Will scale image to fit the screen size */
}
fitrobotic
fitrobotic
1,290 Points
fitrobotic
fitrobotic
1,290 Points

Thanks I will try this.

fitrobotic
fitrobotic
1,290 Points
fitrobotic
fitrobotic
1,290 Points

I don't think I was asking the right question. What I'm trying to do is have the image scale down so when looking in tablet or phone the entire background image can be seen. With all the methods I have tried, the image covers the entire page however only a portion of the picture is visible. I have a person lifting weights in the photo but when I make the browser smaller only the arm is visible.