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
Designed by Uong Jowo, Photosout is same like Blogsletter a responsive blog Template for those who want to showcase their creative work and build a strong experience with their users. From travelers to photographers, Photosout is the template choice to reach your blog style.
The Home Page via recent post areas. Let the users find your personality from the 1st page they visit.
The Single post via a parallax effect on containers that have background images and text above them.
DEMO
regard,
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
Designed by Uong Jowo, Blogsletter is a responsive blog Template for those who want to showcase their creative work and build a strong experience with their users. From travelers to photographers, Blogsletter is the template choice to reach your blog style.
The Home Page via recent post areas. Let the users find your personality from the 1st page they visit.
The Single post via a parallax effect on containers that have background images and post title above them.
DEMO
Follow this Tutorial image
Change your format timestamp like below
Blogsletter Responsive Personal Blogger Template
- Uong Jowo
- October 01, 2017
- Themes ThemesDesigned
Designed by Uong Jowo, VeryMag is a responsive Blogger Template best fit for News/Media Agencies and Journal Bloggers who are looking to start a News Style Blog. It is suitable for any type of blog nice be it travel, outomotive, tech, fashion etc.
How to change Google plus hoverCard
Go to Edit HTML,
Find this:
useId = "https://plus.google.com/112358013716634798554"
Replace "112358013716634798554" with yours
Don't replace with your https://plus.google.com/+yournameID !
DEMO
VERYMAG THEME
Designed by Uong Jowo
VeryMag is a responsive Blogger Template best fit for News/Media Agencies and Journal Bloggers... read more
Thanks for not remove a credit link!
© 2017 UONG JOWODesigned by Uong Jowo
VeryMag is a responsive Blogger Template best fit for News/Media Agencies and Journal Bloggers... read more
regard,
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.