How to take background-color from padding?

1

I'm using Bootstrap 3 and I have a div like this:

<li class="col-md-3">
    <img src="image.jpg" alt="Example" />
    <div style="position: absolute; width: 100%; height: 100%; ">
        <span style="position: absolute; widht: 100%; height: 100%; padding-left: 15px; padding-right: 15px; background-color: #000">
            <p>Teste</p>
            <button type="button" class="btn btn-success">Clique Aqui</button>
        </span>
    </div>
</li>

I wanted this span to have the background only in the padding, as it has in col-md-3, so that the background is only in the image.

I tried some ways but I could not, does anyone have any ideas?

    
asked by anonymous 04.02.2014 / 14:36

2 answers

1

padding is a space within container , ie if you have a background color it will be displayed. I believe it is not possible to remove the background color from only one part.

But as I said @xmdenis use borders or use margin .

     <span style="position: absolute; widht: 100%; height: 100%; border-left: 15px solid #000; border-right: 15px solid #000;">
        <p>Teste</p>
        <button type="button" class="btn btn-success">Clique Aqui</button>
    </span>
    
04.02.2014 / 14:49
0

Try this, my friend:

CSS:

div {
    padding:50px;
    background-image:linear-gradient(to bottom, rgba(240, 255, 40, 1) 0%, rgba(240, 255, 40, 1) 100%), linear-gradient(to bottom, rgba(240, 40, 40, 1) 0%, rgba(240, 40, 40, 1) 100%);
    background-clip: content-box, padding-box;
}
    
04.02.2014 / 14:51