Unfortunately, sometimes in real-world situations, the developers do not have all the power and compromises must be made. I understand that this is technically putting an element of style into your markup rather than keeping it within the CSS. I am absolutely prudish about keeping my code clean and semantic.

Before you pull out your semantic soapbox. An extremely pixelated image as the page background can easily make a good design look bad. Along with making sure your image is not too big, be careful that it is not too small. Also, you wouldn't actually want to load a 2560x1600 image on a mobile device.ģ. As seen in the demo, depending on the dimensions of the background image, the image can easily be too short or too narrow in certain experiences. Be wary of how your page is most likely to be viewed.

So if you were using this technique to set the background on a specific div, that specific div would need to have an absolute or relative positionin applied to it.Ģ. If none are found, it will climb up the DOM all the way back to the element. When an element is positioned absolutely, the values set will be factored relative to the next parent element with either absolute or relative positioning applied. Note: Fixed position also works but it isn't supported on iOS devices prior to iOS 5. Finally, we set the width to 100%, causing the image to automatically scale to the full width of the parent element. Setting the left and top values anchor it to the (you guessed it) top left corner of the body. This removes it from the normal flow of the document so that it will not affect the positioning of other elements. Here we are simply positioning the image absolutely.

Markdown monster resize image