Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

nicholas maddren
nicholas maddren
12,793 Points

Is adding a background image via CSS classed as bad practice?

I have added a background image with the following css:

.land-image {
    background: #ffffff url('../media/img/bg-top.png') repeat center center;

}

The issue I am having is how do I make that image responsive if I'm inserting it in the CSS?

I am using a section tag that covers my header so that image displays for that part of the structure.

The image is going beyond the view port when I want it to fit and resize.

Any tips would be appreciated.

6 Answers

nicholas maddren
nicholas maddren
12,793 Points

I worked this out on my own eventually just use this in your CSS if anyone find this thread:

-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

No it's not bad practice. Specifically if you want to overlay HTML based text over an image that might Chang regularly. Keeps you from having to recreaet the image. Just need to change the text

Adding a background using CSS is generally the preferred practice.

You should be able to use media queries to help you resize the background for different view ports.

I recommend this site as a pretty good break down of how that is done: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Ignore this I miscomprehnded the end of the question

James, what method would you recommend for a responsive site?

See my edited statement

nicholas maddren
nicholas maddren
12,793 Points

So how can I make it responsive? Adding max-height: 100%; doesn't make a difference.

For a step by step though, this might help you more with the code: http://www.smashingmagazine.com/2013/07/22/simple-responsive-images-with-css-background-images/

nicholas maddren
nicholas maddren
12,793 Points

I need it to work exactly how this example does: http://startbootstrap.com/templates/grayscale/

It doesn't look like they are using media queries for the bg image. It looks like they use height of 100% and it workd but mine has no change.

Using a width of 100% and height of 100% will work. The site uses a media query at 766px.

Although I am more familiar with foundation than I am with Bootstrap, so it may be a column break.

I've never used a large background image personally, always tiled smaller images