Home/ Questions/Q 9022521
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T05:31:51+00:00

When setting a background-image for a <div> element is the required image size effected

  • 0

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 (2×316) to get a 1:2 ‘perfect’ pixel ratio.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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)?

    • 0