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

nicholas maddren
nicholas maddren
12,793 Points
Posted by 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
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;
James Andrews
James Andrews
7,245 Points
James Andrews
James Andrews
7,245 Points

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

Kaia Greene
Kaia Greene
1,971 Points
Kaia Greene
Kaia Greene
1,971 Points

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/

James Andrews
James Andrews
7,245 Points

Ignore this I miscomprehnded the end of the question

Kaia Greene
Kaia Greene
1,971 Points

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

James Andrews
James Andrews
7,245 Points

See my edited statement

nicholas maddren
nicholas maddren
12,793 Points
nicholas maddren
nicholas maddren
12,793 Points

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

Kaia Greene
Kaia Greene
1,971 Points
Kaia Greene
Kaia Greene
1,971 Points

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
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.

Kaia Greene
Kaia Greene
1,971 Points

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.

James Andrews
James Andrews
7,245 Points
James Andrews
James Andrews
7,245 Points

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