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;
}
Related
I am making a site using HTML and CSS but my background image is not responsive
for small devices like mobile its not resizing as I decrease the size of windows
my CSS code for the image is like this:
body{
background-image: url(image.jpg);
background-size: cover;
border-image-repeat: no-repeat;
}
You need to look at using media queries, they are used in css to define certain screen sizes.
I recommend having a look here: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
I would also recommend for images to have them in multiple sizes, you don't want to squash a large image onto a mobile size canvas, you should separate them into mobile/tablet/desktop
#media only screen and (max-width: 768px) {
/* For mobile phones: */
body {
background-image: url(mobile_image.jpg);
background-size: cover;
border-image-repeat: no-repeat;
}
}
You can use the same image to scale based on the size of the browser window:
background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;
/* it is used when the browser or screen size is below 767px */
#media only screen and (max-width: 767px) {
body{
background: url(image.jpg)no-repeat;
background-size: cover;
background-position: center;
}
}
I am trying to create a responsive background image which fills the entire page. I followed the CSS from this question which worked fine for me.
background: url(captiveportal-back.jpg) no-repeat center center fixed;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
However I would like to center the image differently in portrait mode (so as to bring a different section of image in to focus).
The bing website does this all the time, every time centering at different pixel as per the background image. How can it be done?
You're gonna have to use medias queries to detect the resolution of the device. For example, to detect a mobile in portrait mode with max 480px :
#media only screen and (max-device-width: 480px) and (orientation: portrait) {
}
Then you're gonna have to change the background-size: cover. That property don't let you change the position of the image since it uses the best configuration possible to cover the entire space.
You're gonna have tweak the numbers to fit your image. For example, if your image is a landscape (width > height), use :
background-size: auto 100%;
This will make the image fill up the entire height.
You can then place it using background-position. For example, top have your image align to the left :
background-position: left top;
maybe you need you a media query..
if you have some code maybe we can help you more.
#media all and (orientation: portrait) {
#div background-position { ... }
}
#media all and (orientation: landscape) {
#div background-position { ... }
}
Finally figured out that it can be done by creating different image versions for different viewports. The srcset attribute allows us to select different images for various viewports. As mentioned by others, media queries need to be used in conjunction to achieve this.
Here is a microsoft blog post explaining the end-to-end solution:
https://blogs.windows.com/msedgedev/2015/10/07/using-extended-srcset-and-the-picture-element-to-tailor-your-image-to-every-device-and-layout
#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
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.
I have a background image in my website. I want to adjust the size of the my background image with browsers window using media queries. I am new to the concept of media queries, could you please show me how to that?
Thanks :)
In my CSS file:
.homepage{background-image:url(../images/work.jpg); background-repeat:no-repeat;}
In my HTML file
<body class="homepage">
</body>
You need to use a media query in your style sheet for specific screen resolutions say for example
#media all and (max-width: 1200px) and (min-width: 520px) {
body {
/* Now whatever styles you use here will be applicable for your specified screen widths */
}
}
So coming to your issue, I assume you want your background of the body to auto adjust according to screen resolutions, you can try this, without using media queries..
html {
background: url('/* Path to image file */') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}