Set Background Image Throughout Your Webpage And Display Some Text Over It
Setting background images throughout the page is possible by HTML5 and CSS3 only.
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 the 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 that can be automatically resized according to resolution (Responsive Web Design comes in 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.