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;
}
}
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;
}
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
I have a responsive background image here and it works well in most screen sizes, however, on the iPad/tablet size it clips the edge of the windmill blades.
Here is the CSS I am using for the space:
background: url('/image/background-img.jpg') no-repeat;
width: 100%;
background-position: 0% 25%;
background-size: cover;
background-position:center;
background-repeat: no-repeat;
How can I continue to fill the background but not clip the image?
It's the expected behavior of background-size:cover. It displays the image as small as possible, making sure it covers all the element and cutting off (cropping) the excess.
You'll want to adjust the min-height of your element until you are happy with the result. To keep it from being cut (too much). To keep it from interfering with how it looks on different screens, you might want to wrap your special rules for tablets in a specific #media query. Example:
#media (max-width: 991px) and (orientation: landscape) {
.jumbotron {
min-height: 62vw;
}
}
I have a homepage with a large background image set top and center. The image is 780px high.
(I am using Bootstrap on Joomla T3 framework)
This looks great on an HD screen and even at slightly lower resoluions, but when you get down to tablet / phone screen size this simply takes up too much space - People would have to scroll down a page or more to get to content.
Here's the CSS:
.homepage {
background: #fff url("../images/home_back.jpg") no-repeat top center;
}
I would like to do keep the image but perhaps scale it down for lower resolution screens. Ideally, the background would simply shift up, so that it just never takes up more than 3/4 of the screen...
In short, is there a way to have the background go to a minus-y position relative to the screen width and height?
EDIT:
Browser support required:
All current main desktop browsers, and very importantly, iPad + Android tablets.
.homepage {
background: #fff url("../images/home_back.jpg") no-repeat top center;
background-size: cover;
}
OK here's the solution that worked best for my needs. Thanks guys for the advice:
#media all and (max-width: 1920px) and (min-width: 980px) {
.homepage {
background: #fff url("../images/home_back.jpg") no-repeat top center;
}
}
#media all and (max-width: 979px) and (min-width: 480px) {
.homepage {
background: #fff url("../images/home_back.jpg") no-repeat top center;
background-size: auto 550px;
}
}
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;
}