Sample content page with background image.
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 size - 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/AVvXsEiq9pqkNJZEnjtEea19A39zi6Tt3FFBa_HpcYQO0j_71RcoMJWcdoKDb3HIjMbIfwCLcRiXGgfZ422prAn5gmc7QtKPcXW3P8TAtcSoSZo98LNl0wafxzv-4PeZsroVwx2-u0jd0Thtpk-d/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/AVvXsEiq9pqkNJZEnjtEea19A39zi6Tt3FFBa_HpcYQO0j_71RcoMJWcdoKDb3HIjMbIfwCLcRiXGgfZ422prAn5gmc7QtKPcXW3P8TAtcSoSZo98LNl0wafxzv-4PeZsroVwx2-u0jd0Thtpk-d/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.
0 comments:
Post a Comment