Re: Dynamic Full Width Background Images

[djdaniel150]

Alright, start by implementing the “background-size: cover;” property in CSS. This will instruct the browser to attempt to stretch the image as far as possible to fill both horizontal and vertical axes. You stated your image is 1300px correct? You don’t need to set a position for a background image in the body it will center itself, although the image may not appear the way you want it too on alternate screens. I used an image this last week that is 1024×768 and it renders perfectly on all screens from my Samsung Galaxy phone up to my 1366×768 15.4in laptop, up to my 27in desktop widescreen monitor at 1900x1024px. I think “cover” attribute is your solution. You may need drop the dimensions of the image to around that 1024×768 if possible. You will also obviously get better quality but use more bandwidth with PNG’s vs JPG’s. There is also the “contain” attribute as well, which will attempt to stretch an element to fill an entire area, like say a CSS ID you specified at maybe “width: 40%; height: 35%;”, etc, or with pixel values as well. The “cover” and “contain” attributes are very flexible and fluid in their nature.

I also used contain for my sites banner, and it scales larger or smaller depending on the size of the screen, or if someone activates a toolbar in their browser, etc, hence “flexible.”