The background image on the website i'm working on (http://www.oatfoundry.com/) doesn't scale correctly for mobile devices. Everything else seems to work fine, but when the aspect ration gets below 537x542, the background image is replaced with a 400x800 grey placeholder. Any thoughts?
There's this rule in your media.css file :
#media screen and (max-width: 520px) {
#home {
width:100%;
height:100%;
color:#FFF;
background:url('http://www.placehold.it/1400x800')50% 80% no-repeat scroll !important;
background-position:center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-attachment : fixed; /* FIXED FOR IE */}
Notice the background is set to a placeholder when the screen is under 520px wide... I found this by watching the computed layout of the #home section within Firebug, while resizing the viewport in Firefox Responsive Design View, just so you know.
Related
I have webpage with a background image:
body {
background-image : url("https://example.com/image.png");
background-size : cover;
background-repeat : no-repeat;
}
This works fine for 16:9 screen but for a mobile phone(9:16), the image covers (kind of) only half the screen!
How to specify different images based on aspect ratio?
You can try this. It may be problem with your image position
body{
background: url(http://www.planwallpaper.com/static/images/nature-wallpapers-hd.jpg) no-repeat top center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Show this, It may help you to understand background-size
CSS background image to fit width, height should auto-scale in proportion
That will always happen as with background-size: cover the browser tries to fill the element with the same background. You can still do some adjustments with background-position, but it's not really helpful in these circumstances.
What could be much better is that you use media queries to use different backgrounds depending on the screen size.
Something like
#media only screen and (max-width: 640px) {
background: url(../images/mobile-background.jpg) no-repeat center center;
background-size: cover;
}
#media only screen and (min-width: 641px) {
background: url(../images/large-background.jpg) no-repeat center center;
background-size: cover;
}
This way you can select specific images for both cases and some of the benefits include more adequate image size which leads to faster loads and less bandwidth consumption for the user. That also leads to better Page Speed results.
This deals with aspect ratios in CSS : https://developer.mozilla.org/en-US/docs/Web/CSS/#media/aspect-ratio. Thanks #GabyakaG.Petrioli
/*background image to load for 9:16 display*/
#media (min-aspect-ratio: 9/16) {
body {
background-image : url("https://example.com/image1.png");
}
}
/*background image to load for 16:9 display*/
#media (min-aspect-ratio: 16/9) {
body {
background-image : url("https://example.com/image2.png");
}
}
/*Common properties can go here*/
body {
background-size : cover;
background-repeat : no-repeat;
}
Right now my wordpress site is set up so the images scale when the screen size changes. I was hoping that, instead, the image can remain at a specific size in the center of the screen and become cropped equally on the left and right when the screen size changes.
I have tried max-width:none but that doesn't keep and crop the image in the center of the page.
Site: Zxndesignco.com
The image in question is the only image on the home page. I only know CSS so I was hoping there is a CSS solution.
Example of what i'm taking about: https://gatewaydemo.wordpress.com/
Thanks for the help.
The general idea is to not use an image, and make that image the background-image of that hero section instead. So delete the img tag and add something like this CSS to .sow-image-container height: 400px; background: url(https://zxndesignco.com/wp-content/uploads/2016/12/HomeImg.jpg) center top; background-size: cover
body{
background-repeat:no-repeat;
background-position:center center fixed;
background-image:url(https://zxndesignco.com/wp-content/uploads/2016/12/HomeImg.jpg);
background-attachment:fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
}
.white{
font-size: 24px;
color: #fff;
}
<div>
<p class="white">Here are some words</p>
</div>
Usually in the body or in a div. I like this group because it covers all the browser bases.
#media screen and (min-width: 800px) {
html {
background: url('/img/ground.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}
If I will use smartphone with screen less than 800px, image will downloaded to my device or not?
You have used "(min-width: 800px)", so - css-rule will works on screens over 800px width.
Also see documentation:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
probably not because your background URL is invalid.
change it to:
background: url('../img/ground.png');
The image will not be downloaded by your device browser if the the smartphones width is less then 800px.
You could easily see this by using a program like fiddler and changing your browser width back and forth
I am trying to make a "background" image that both scales to fill the screen, and is fixed (i.e. does not scroll with rest of content.)
I started by trying to use a true background image:
background: url(http://i.imgur.com/DJaWd.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
But as you probably know, using this technique the image scrolls on iOS devices. So, I tried this approach using a CSS and a div:
CSS:
#fixedbg{
background:url('/images/contest_bkg.jpg') no-repeat center center;
position:fixed;
height:100%;
width:100%;
z-index:-1;
top:0;
}
The second approach does stop the image from scrolling, but the image displays 1:1, instead of scaling to fit the screen/viewport size. Any tips on how to get the image to scale while staying locked down?
Try this:
-webkit-background-size: 1600px 1060px;
Of course px is width height of your bakcground image
I have a div tag like
<div id="MainMenu1" dojotype="dijit.layout.ContentPane"></div>
This div is associated with a css like
#MainMenu1
{
height:53px;
background: url(../images/top_banner.png) no-repeat;
background-position:center;
margin:auto;
width:100%;
border:0;
}
I see that the background image is fine on a smaller screen but on a wider screen, it occupies only the center position. I want the image to occupy the full screen even on wider screens and I do not want the image to "repeat".
How would I do this?
#MainMenu1
{
height:53px;
margin:auto;
width:100%;
border:0;
background: url(../images/top_banner.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Try this. It works perfectly for me. It should fit the background perfectly in the center and reasonably stretch it to whatever screen size the website is being viewed on.
You can either let the image repeat meaning it covers the whole space or use background-size: cover which will scale it to cover the whole area while keeping the original aspect ratio of the image.