This is a sample page using full width fixed background. Our blogger store, shoppe, FREE or PREMIUM themes, unless otherwise stated, includes a fixed, full width, responsive background image settings.
We have already took the initiative to include the necessary codes snippets to easily include a background image of selection. All the CSS styles has been pre-install by us in the template codes for quick integration.
For best page rendering and optimization, please upload an image with the below criteria:-
- Minimun sizee - 960px wide and 800 px high..
- Max image file size - Less then 300Kb - for quick page rendering purposes.
- Preferably .jpeg image for cross browser compatibility (especially for IE).
How to Install your Theme Responsive Background Image
Go to Template > Back-Up and Restore > Save your Template.
Then go to Edit HTML > press Ctrl +F4 > search for keyword "<body> " (without quotes) and you will be forwarded to the code snippet like so:-
<!-- //Delete this line of code <style type='text/css'> #content-wrapper{ background:#fff; } </style> <div id='bg'> <img alt='background image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZkiyCCEm5z4SZ88QgoyC9R-ZPMJRzgcECcOFI_Mmha7eWePEaTmzMZWftnlPswwX_1uLDPHWooWiATTfRvjR5U3hLSDa8MDsZwVfZzp-UQZq_n9EUg98HqrpsXvSk7A-5J9g9NnmEruEm/s1600/bg_2.jpg'/> </div> Delete this line of code// -->
Please delete this 2 line of codes:-
<!-- //Delete this line of code
and this line:-
Delete this line of code// -->
Now add/replace your background image URLat this line of code:-
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZkiyCCEm5z4SZ88QgoyC9R-ZPMJRzgcECcOFI_Mmha7eWePEaTmzMZWftnlPswwX_1uLDPHWooWiATTfRvjR5U3hLSDa8MDsZwVfZzp-UQZq_n9EUg98HqrpsXvSk7A-5J9g9NnmEruEm/s1600/bg_2.jpg'/>
You can upload an image through your blog pages/posts > in blog page editor > click image icon > click upload image > select the image file > click Save.
Still in editing mode > select image > click the "original size" link (for Blogger) > then right click the image > and select "copy image URL".
Use this URL to the code snippet above.
If your background image displays awkwardly or does not display at all:-
- The URL of image taken from blog post/pages with the "original size" link checked on image select.
- The image URL is not in full like the example code snippet.
- Your new background image URL is not located in between the source quotes " ".
- You included an image URL from a smaller image size and not the "original" image size.