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.

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.

• javascript
• css

1 Answer 1

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.