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 achievements
achievements
15,883 Points

css for background image bootstrap

hi

I am looking for the proper css to make an image background responsive.This background-image includes tabs with a responsive table.What css should i use in bootstrap to do this?

Mike Bronner
Mike Bronner
16,395 Points

Depending on your use-case, you will want to use either

background-size: cover;

or

background-size: fill;

See https://www.w3schools.com/csSref/css3_pr_background-size.asp for details. Hope this helps :).

6 Answers

Mike Bronner
Mike Bronner
16,395 Points

For that type of scenario you probably want to use border-image and slice it: https://css-tricks.com/understanding-border-image/

achievements
achievements
15,883 Points
achievements
achievements
15,883 Points

i have done this but the top and the bottom of the background-image is not visible.What is your opinion?

Mike Bronner
Mike Bronner
16,395 Points
Mike Bronner
Mike Bronner
16,395 Points

That is expected behavior. "Cover" will crop the image so that it always fills the element it is applied to. You might try "fill", which resizes the image to always fit in the element it is applied to, without cropping.

Jordan Kaiser
Jordan Kaiser
5,438 Points
Jordan Kaiser
Jordan Kaiser
5,438 Points

An adjustment to the answers already give. The two attributes you could use are:

background-size: cover;

or

background-size: contain;

I don't believe there is an attribute called background-size: fill.

See this link for interactive examples. https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Mike Bronner
Mike Bronner
16,395 Points

Thanks Jordan, that was what I meant :)

achievements
achievements
15,883 Points
achievements
achievements
15,883 Points

my problem is in this link: http://www.fruitsandvegetables.site/ the background-image is responsive but the tabs and the table are outside of the image in a mobile.

achievements
achievements
15,883 Points
achievements
achievements
15,883 Points

thank you i will read the link!