When setting a background-image for a <div> element is the required image size effected by the border?
I'm working on an retina iPhone project with a element that is 100% width. My background image is 640px wide and I'm using background-size to get it to display nicely on the retina display.
If I use a border on my <div> will i need to reduce the size of my image to get a 'perfect' display?
e.g.
320px(div) - 4px(2px border left and right) = 316px
So my image should be 632px (2x316) to get a 1:2 'perfect' pixel ratio.
Background images display within the constraints of the border — that is to say the border is not included in the space that the background displays over (it will display over padding, though).
It may be helpful to your particular case to use background-size: cover (MDN reference)?