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
Ode Bratha yoga
3,278 Pointsbootstrap 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
Ruby Longe
3,895 PointsI often have this problem too! I would appreciate guidance on this as well
9 Answers
Guled Ahmed
12,806 PointsI 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.
Ruby Longe
3,895 PointsHi 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.
Ode Bratha yoga
3,278 PointsHi 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
Ode Bratha yoga
3,278 Pointsi 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%; } '''
Ruby Longe
3,895 PointsI'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 :)
Ode Bratha yoga
3,278 Pointshi 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
Ode Bratha yoga
3,278 Pointsyes i will mrs guild thanks alot
Ode Bratha yoga
3,278 Pointsyes i will mrs guild thanks alot
Ode Bratha yoga
3,278 Pointsthe 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
12,806 PointsUse: background-size:cover;
Ruby Longe
3,895 PointsI 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
Guled Ahmed
12,806 PointsGuled Ahmed
12,806 PointsDo you have any links to your project? I may be of assistance.
Regards, Guled