Cascading Style Sheets is the best way of setting the background properties in your HTML page. It is more flexible than the (outdated) HTML method. Using CSS, you can set the background properties of any HTML element. Plus you can do things like, specify an image's position, whether it should repeat, how it should repeat etc.
Pattern as the page background: click the text link to view the pattern based background page
Texture as the page background: click the text link to view the texture based background page
Image as the page background: Page-A | Page-B
click the text link to view the image based backgrounded page
GIF Page | JPEG Page | SVG Page | Rollover Page
Full-screen background images are nothing new in web design, but the ways in which we can achieve this effect have changed and improved as our industry has progressed. Additionally, the whole responsive web design movement has put even more emphasis on the need for dynamic websites – using dynamically resizing background images in your website designs can be a great solution to this need. Let’s look at 4 different solutions for full page background images, starting with a CSS-only solution and moving into a few different jQuery-powered solutions. All of these solutions are free, well-documented and relatively easy to implement, too!
You gotta love when you can solve a problem solely by using CSS. The CSS3 spec has a new property, titled background-size. We can use this to our advantage when creating full-screen background image websites by setting its value to cover.
Browser Support: This is the main downside – Internet Explorer doesn’t recognize background-size below IE9. Modern browsers are good though.