Is there any way to achieve the effect of background-size:cover
whilst filling up the area behind the border as well. To illustrate this better take a look at the image below: the left image is using background-size:cover
and neatly fills up the entire box itself regardless of whether the image is portrait or landscape, but is hidden behind the semi transparent top and bottom borders. The second image is created using a background-size: auto 260px
rule which gives exactly the effect I want, however only works because I know that the background in this case is landscape (and that the box itself is 200px
and the border 30px
).
A JSFiddle which is used to render the above two boxes can be found here. I have a hard time believing this is not possible with pure css, but even open for javascript based solutions otherwise (although I could build a hackish Javascript solution I have no idea how to make on look relatively clean...). Still hoping there is a CSS way to do this though.
This can be achieved by setting the background-origin
property to border-box
:
#one{
background-size:cover;
background-origin: border-box;
}
fiddle
There is also a background-clip
property, which sounds like it should do that, but doesn't — since the background by default extends under the border, the question is rather why background-size:cover/contain/%
don't take the border into account. Backwards compatability, I suppose.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With