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

bootstrap full background image

i try to make full background image on bootsrap and cant do that, im already put jumbotron class outside of container class to make it fully width and when i create new custom css to add background image on the jumbotron class, my image didnt show full. i try to add many css comand like background-size to 100% and background-repeat to no-repeat but it didnt solve my problem can anyone help me with this ? thanks

Guled Ahmed
Guled Ahmed
12,806 Points

Do you have any links to your project? I may be of assistance.

Regards, Guled

I often have this problem too! I would appreciate guidance on this as well

9 Answers

Guled Ahmed
Guled Ahmed
12,806 Points

I think I have a solution: Go to the bootstrap.min.css or normal bootstrap css. Look for the jumbotron class within the bootstraps css file and modify it by adding a background. I was successful with adding a background using Twitters Jumbotron example. Took out my console and started to edit the jumbotrons background. I personally do not make custom css for objects within the framework, I go right in and modify them to my liking:

.jumbotron{padding:30px 15px;margin-bottom:30px;color:inherit;background:url('https://unsplash.imgix.net/photo-1423683249427-8ca22bd873e0?fit=crop&fm=jpg&q=75&w=1050')}

Use the Ctrl & F keys or Command & F to search through twitter bootstraps css. I haven't experimented with adding my own custom css, but I'll report back when I do.

Hi Ode Bratha yoga,

I normally have this problem and I just checked out the solution on this link which actually solved my problem http://stackoverflow.com/questions/14335032/bootstrap-background-image-not-working

My issue was that I was missing a / ie a forward slash in-front of my pictures so my code should have been: background-image: url('/pictures/name_of_picture'); but my actual code was

background-image: url('pictures/name_of_picture');

I think this is to do with relative pathways and the way files are positioned in your folders. I can try and be more specific if you can post your code since I can't see what's wrong from your explanation but this might help a little bit.

Hi Ruby Longe,

my image is pop up its on the screen but the image wont fully show. its like the image was zoom in or something like that. wait a minute i will attach my code.

thanks before sorry for my english im still pratice

i got my code on index.html like this

'''html <div class="jumbotron"> <div class="container"> <h1>Raja Diesel</h1> <p>Sewa genset dan AC Profesional dan berpengalaman</p> </div> </div> '''

and on my css i got custom css to style the jumbotron like this

'''css .jumbotron { background-image: url('../img/fronttruck.jpg'); background-size: 100%; } '''

I'm not quite sure if I get what's going on here. Are you saying that the picture shows but it does fill the jumbotron as you'd like it too?

If that's the case then the code that I tend to use for the .jumbotron in the css file is .jumbotron { min-height: 600px; background-image: url('../pictures/name_of_picture'); background-size: cover; background-attachment: fixed; }

Your main culprit seems to be the background-size: 100% which needs to be switched to background-size: cover. Reason being that cover scales the background image to be as large as possible so that the background area is completely covered by the background image. This is what you want since you want the image to cover the whole of the jumbotron. You've set it to a percentage which sets the width and height of the background image in percent of the parent element. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto". This limits the size of the picture giving you an unwanted effect.

Take a look at this page as well (since I copied the above info from there: http://www.w3schools.com/cssref/css3_pr_background-size.asp (W3Schools is a great resource! It's helped me a lot when I get stuck with things wrong with my code.)

Let me know if this helps :)

hi ruby thanks for assist me, very helpful answer

im already try your code and its getting better but the image croped its look like this please visit my page im already upload it rd-genset.com

yes i will mrs guild thanks alot

yes i will mrs guild thanks alot

the img still croped, what is going on im confused its so hard to realize this. please anyone who can do it tell me :( im on deadline two days from now i need to finish my project :(

Guled Ahmed
Guled Ahmed
12,806 Points

Use: background-size:cover;

I think it might be because the footer is fixed and this needs to be changed to static in order to not block the picture from the bottom.

With regards to the navbar at the top, there's not a lot you can really do about that. My only suggestion (since I haven't seen your full code) would be to place the navbar outside of the jumbotron to see if it rests on-top of the picture. However, this caused there to be a gap in between my jumbotron and my navbar which I didn't like (and I wasn't to sure how to get rid of it but you could try something like

.jumbotron { position: relative;
top:0; } to make the jumbotron stick to the navbar if that will work)

Otherwise, you may need to customise your navbar more eg make it more transparent or even go for a sticky navbar https://teamtreehouse.com/forum/forum-tip-create-a-sticky-navigation-with-css-and-jquery-2 Hope that this helps