Set Background Image throughout Webpage Using HTML5 and CSS3

In HTML,

Let me explain the steps first:

• Create a container such as <Div> tag.
• Take an <img> tag in Div (Specify appropriate 'src' attribute of <img> tag).
• Take another <Div> tag inside the outer container.
• Close the outer container.
  
  So, your code will look like the following code snippet:
  

In CSS,

Let me explain some steps:

• Define Position, Height and Width of Outer Container.
• Define Background Position, Background Repeat, Background Size, Height and Width of <img> tag.
• Define Position, Top, Left, Width, Z-Index for inner <div> tag. (Define Color, Font-family, Font-size, Text-align for displaying textual information if require.).

So, your CSS file will look like the following code snippet:

Key Points:

• Always define Height and Width of Container and Image in Percentage (%) rather than defining in Pixels. It really decreases your efforts for making your site responsive.
• Two important properties of <img> tag which you have to specify such as Background-Position and Background-Size.
• Background Position specifies at which position image should display.
• Background Size: Cover specified image should display throughout the page means it covers a particular area of a page. Image scales according to page size changes.

So, at last, you will get one page having a background image which can be automatically resized according to resolution (Responsive Web Design comes in the picture).

This type of solution is helpful when you make your page for various Mobile (320,360,480,640), I phone(375/376,667), I pad (1024) as well as Desktop (1024,1366,1600) Resolutions.

Demo Example (Source Code)