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;
}
}
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;
}
}
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;
}
}
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 |
How to make background image fixed responsive working on actual mobile devices with simple css?
- Uong Jowo
- February 17, 2019
- Blog
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 == "item"'> adding like below
<b:if cond='data:blog.pageType == "item"'>
<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
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 == "item"'> adding like below
<b:if cond='data:blog.pageType == "item"'>
<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
How to change first image to background image at blogspot?
- Uong Jowo
- October 01, 2017
- Blog
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.
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.
- In the composer box, place your cursor where you want to put the “Read More” link.
- Click Insert jump break .
How to show selected images in FrontPage with justified gallery
- Uong Jowo
- October 18, 2016
- Blog
About Me
- Uong Jowo
- Uong Jowo was Born In Surabaya, March 1971. I'm A Blogger Templates Designer and a Converter Wp Themes to Blogger Template.