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 Alessio Tinti
Alessio Tinti
3,806 Points

Background border bootstrap

Hi all, in my website when i set background image to a col-md-6 row the images on the background touch one the other. i tried to set margin to the column but this push one of them on the successive row. 

html
    <div class="row">
        <div class="container">
            <div class="col-md-6 text-center bus-home">
                <h3>Bus dai 50 ai 64 posti</h3>
            </div>
            <div class="col-md-6 text-center minibus-home">
                <h3>Minibus dai 19 ai 30 posti</h3>
            </div>
        </div>
    </div>

css

.minibus-home {
    background: url('../img/minibus-grigio-da-sinistra.jpg') no-repeat;
    background-position: 0 -100px;
    background-size: cover;
    color: #fff;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
    height: 230px;
    border-radius: 10px;
}

.bus-home {
    background: url('../img/bus-blu-anteriore.jpg') no-repeat;
    background-position: 0 -100px;
    background-size: cover;
    color: #fff;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
    height: 230px;
    border-radius: 10px;
}

thanks all for the help

David Abel
David Abel
5,199 Points

Have you tried padding on the element? Or setting the image to less than 100% of its container?

2 Answers

Steven Parker
Steven Parker
241,811 Points
Steven Parker
Steven Parker
241,811 Points

:point_right: You have your background-size set to cover, which means to cover 100% of the area. Instead, try setting background-size to something like 95%.

BTW: Padding normally only affects contents, not backgrounds.

David Abel
David Abel
5,199 Points

Thanks for the padding info. I was pretty sure it was a matter of reducing the image percent, but as there wasn't enough code to test out anything, I didn't want to eliminate other possibilities.

Steven Parker
Steven Parker
241,811 Points
Steven Parker
Steven Parker
241,811 Points

Another idea you might like would be to constrain your background to inside the padding by setting this:
background-clip: content-box;

Alessio Tinti
Alessio Tinti
3,806 Points
Alessio Tinti
Alessio Tinti
3,806 Points

really thanks guys, but i solved setting nesting row so bootstrap applies automaticaly margin. have a nice day!