With CSS how do I make an image span the full width of the page as a background image

Question

Say  like in this example here  http   www electrictoolbox com examples wide-background-image html  When I do it  I end up getting white borders around the image no matter what I do  What am I doing wrong

User · Answer

Background images  ideally  are always done with CSS  All other images are done with html  This will span the whole background of your site    body     background  url     images cat ong      background-size  cover    background-position  center    background-attachment  fixed

User · Answer

You set the CSS to     elementID       background  black url http   www electrictoolbox com images rangitoto-3072x200 jpg  center no-repeat      height  200px      It centers the image  but does not scale it   FIDDLE  In newer browsers you can use the background-size property and do    elementID       height  200px       width  100       background  black url http   www electrictoolbox com images rangitoto-3072x200 jpg  no-repeat      background-size  100  100       FIDDLE  Other than that  a regular image is one way to do it  but then it s not really a background image

User · Answer

If you re hoping to use background-image  url        I don t think you can  However  if you want to play with layering  you can do something like this    lt img class  bg  src         gt    And then some CSS    bg     width  100     z-index  0      You can now layer content above the stretched image by playing with z-indexes and such  One quick note  the image can t be contained in any other elements for the width  100   to apply to the whole page   Here s a quick demo if you can t rely on background-size  http   jsfiddle net bB3Uc

[html] With CSS, how do I make an image span the full width of the page as a background image?

Examples related to html

Examples related to css