A blog or website background image not working on actual mobile devices.
Use css below

1. Left background image:

@media(max-width:480px){
body{
background-image: url("img.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top left;
background-size:350% auto;
}
}
Left background


2. Center background image:

@media(max-width:480px){
body{
background-image: url("img.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top center;
background-size:350% auto;
}
}
Center background

2. Right background image:

@media(max-width:480px){
body{
background-image: url("img.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top right;
background-size:350% auto;
}
}
Right background

  • Uong Jowo
  • February 17, 2019
8 Comments
Assalamu'alaikum, friends...
Need change firstimg to background image..?


You can add some code like my template Blogsletter and Photosout to your blog.

1.Go to Edit Template HTML.

2.Find <b:includable id='post' var='post'>

3. After this <b:if cond='data:blog.pageType == &quot;item&quot;'> adding like below

<b:if cond='data:blog.pageType == &quot;item&quot;'>               
<div id='myimage' style='display:none;'>
<b:if cond='data:post.firstImageUrl'>
 <img expr:alt='data:post.title' expr:src='data:post.firstImageUrl' width='100%'/>
 <b:else/>
  <img src='...your-other-image.jpg' width='100%'/>
  </b:if>
</div>

4. Add script below, before </body>
<script style='text/javascript'>
 //<![CDATA[
var getImageSrc = $('#myimage img').attr('src');
//
$('#BgImg').css('background-image', 'url(' + getImageSrc + ')').style.background = 'no-repeat center';
//]]>
</script>

5. Place it below ,where you want.
<div id='BgImg'/>

7. Add css below before ]]></b:skin>

#BgImg{background-position:top center;background-size:cover;position:relative;}

8. About Position, you can choose: relative or absolute,like you want.

9. Save

  • Uong Jowo
  • October 01, 2017
3 Comments
This tutorial for theme using Justified Gallery like my Bloggrid template.

If you want to show only 1 or 2 [etc] images, a summary with a link to “Read More:”
With Jump Breaks you can show just some images like you want.



Add a "Read more" link

  • Sign in to Blogger.
  • Click the blog.
  • Click the post.
  1. In the composer box, place your cursor where you want to put the “Read More” link.
  2. Click Insert jump break .

  • Uong Jowo
  • October 18, 2016
25 Comments