I have a website on github pages, which works perfectly on any desktop browser. However, two of my background images will not show up on mobile devices (I've only tested iPad and iPhone, it could just be IOS). I have tried adding media queries to make sure the background-attachment property is set to scroll on handheld devices (I had read this was sometimes the problem). I also have media queries that ensure the images are not too large to load. Here is my html:
<div id="image-1" class="background-image"></div>
<div id="image-2" class="background-image"></div>
Here's the css:
#image-1 {
background-image: url('imgs/coding.jpg');
}
#image-2 {
background-image: url("imgs/game.JPG");
}
#media only screen and (min-width: 500px) {
/* For mobile phones: */
#image-1 {
background-image: url("imgs/coding-large.jpg");
}
#image-2 {
background-image: url("imgs/game-large.jpg");
}
}
#media not handheld {
.background-image {
background-attachment: fixed;
}
}
.background-image {
opacity: 0.8;
background-repeat: no-repeat;
background-attachment: scroll;
background-size: 100% 100vh;
height: 85vh;
}
If I change 100vh to 100%, then the images load, but they are terribly stretched vertically. Any suggestions?
You can either:
use a fixed position, with a background position center center: see "CSS background-size: cover replacement for Mobile Safari".
This page refers to a background-attachment: fixed; as well, while remining use that viewport values (such as vh and vw) are technically supported on iOS 7 but simply do not work, hence the rodneyrehm/viewport-units-buggyfill project.
or (less elegant), use fixed size for media with a given size: see "Background image not displayed properly on iPad and iPhone"
Seems iPhones disregard #media rules for handheld devices (See here Do iPhone / Android browsers support CSS #media handheld?
). And giving background-size property of 100% 100% will make the image stretched if the image is not square.
So you can use max-width media query to detect mobile devices and set background-attachment as scroll. And either use background-size: cover or background-size: 100% auto
It looks like you have competing heights with your background-size attribute and your background height attribute. Check out CSS-Trick's post on background-sizes for a better implementation. Since it looks like you want to cover the width of the page with the images, go with background-size:cover instead. Hope this helps.
Use this
/* Image is centered vertically and horizontally at all times */
background-position: center center;
/* Image doesn't repeat */
background-repeat: no-repeat;
/* Makes the image fixed in the viewport so that it doesn't move when
the content height is greater than the image height */
background-attachment: fixed;
/* This is what makes the background image rescale based on its container's size */
background-size: cover;
Related
I have been working on positioning a background image, but the image is only positioned correctly while the webpage window is adjusted to its minimum width. As I resize the browser window the image is clipped on all of its' side lengths. The photo has a height much greater than its width(1391 x 2471). I thought I might have to incorporate a vertical scroll? The website is being designed for mobile platforms but I will be viewing and designing it primarily on a computer monitor. How might I maintain the images' integrity from Min. Width of browser to Max. Width of browser?
* { margin: 0;
padding: 0;
}
html {
background: url("image.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
My CSS code for the positioning of the image was taught to me on CSS-Tricks though it has provided the best results so far. I have added a link to the image encase you would like to view. It is a photo I took myself so I hope the link provided is functional.
You need to get the html element (or whatever element you want the img to show in) to have at least the full height of the img when the img has full width (100vw) of the viewport.
You can do that if you know the aspect ratio of the image. In this case you know the natural width and height of the original so the aspect ratio can be calculated by CSS if you give it those dimensions as variables.
Here's an example using your CSS settings (except see caveat below):
* {
margin: 0;
padding: 0;
}
html {
--imgw: 1391;
--imgh: 2471;
width: 100vw;
min-height: calc(100vw * var(--imgh) / var(--imgw));
/* make sure the whole height of the image is always shown */
background-image: url(https://picsum.photos/id/1015/1391/2471);
background-size: cover;
}
HELLO
Caveat: you have background fixed in your CSS. Two problems with that: it renders the element unscrollable and in any case it is not properly supported in Safari and makes the background look 'fuzzy' on IOS. So this snippet has removed it.
body{
background: url("");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
If I have understood this properly, you want the image to be displayed properly on all the sizes you want?
Well in that case you can use #media query.
#media(max-width: your max width in px) {
/*And here change the height and width so that it doesn't look weird*/
}
I am currently developing the footer of a web page in HTML / CSS. This footer will contain a lot of elements (address, links, buttons, ...) and it must, therefore, be responsive. Consequently, on a desktop version, we have all the footer's elements on a row and, then on mobile we have all the footer's elements on a column (as the following images show you);
My goal is to get the result below on a widescreen (desktop):
And here is the result I want to achieve on a mobile screen:
As you can see, we must have a zoom effect when resizing the page of a browser or when we pass on a smartphone screen. I have a lot of elements to insert in the footer so the image must be zoomed to integrate them all.
Here is the code I have done so far.
.footer {
height: 639px;
background: url("https://nsa40.casimages.com/img/2020/07/11/200711012945662645.png");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
<div class="footer"></div>
The result is almost what I want but the problem is that the height of the footer does not change, and therefore I do not have enough space to put all my elements in the footer in the mobile version.
Thank you :)
Try adding height: auto, padding-top, padding-bottom in a media query for phone. You may have to experiment with the padding values a few times to make it look good. Also change the background-position so the curve can be seen on mobile phones. It will look something like this.
#media (max-width: 991.98px){
.footer{
height: auto;
padding: 50px 0;
background-position: center top;
}
}
#media screen and (min-width: 480px) { //480px is breakpoint you can adjust according to your need
.footer {
height: auto;
background: url("https://nsa40.casimages.com/img/2020/07/11/200711012945662645.png");
background-position: center top; //adjust according to you need
background-repeat: no-repeat;
background-size: cover;
padding-top: 3rem; //adjust according to your need
padding-bottom:3rem; //adjust according to your need
padding-left:inherit;
padding-right:inherit;
}
}
<div class="footer"></div>
I only want to add an image (size 1920x1080) in my html for my 1920x1080 screen. The thing is that if I see my web in full screen (F11) it works perfect, but if I see it normally (with the OS' window, browser's bookmarks, etc.) it cuts the image's height. The CSS code used is the following:
html,body{
margin:0;
padding:0;
height:100%;
overflow: hidden;
background-image: url("image.jpg");
background-color: white;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Is there any way to get the image perfectly without full screen? Or to know how much height it takes my window and browser? Because, if not, then other people with the same monitor screen size, but with different browsers and OS, could have different results.
background-size: auto auto;
This will preserve the original size (and will be clipped at the edge). "Cover" always resizes the image to cover the container.
Alternatively, you can check the user's screen size and resize the background accordingly.
html, body {
background-size: auto auto;
}
#media only screen and (max-height: 720px) {
html, body {
background size: 1280px 720px;
}
}
#media only screen and (max-height: 480px) {
html, body {
background size: 800px 480px;
}
}
etc.
You can also give the container a "min-height" or a "min-width" in css so the picture won't be cut even if the screen size a bit smaller than what you specified.
Example:
#media only screen and (max-height: 480px) {
html, body {
background size: 800px 480px;
min-width: 800px;
min-height: 480px;
}
}
I check different webs to see the effect I described. In all I found there is a cropping effect because of the window of the browser (in the height of the image). Instead of full 1080px height we usually see images cropped in height. So I guess that it is inevitable to crop it a little bit if we don't visit the web in full-screen.
One mini-solution is to decide where should crop it (background-position: center top; crops the bottom part). Other is to make the web with a margin at top (not advised for people visiting with other methods: mobile, full screen, etc.)
The style that maybe can do what you want is background-size: auto 100%;, so it take the height of the browser to the size of the background, maintaining the proportion width.
Try to use this styles, so the image height is always the height of your browser. The bad part is that the image if it doesn't have a big width, it can have white lines at the sides.
html {
height: 100%;
background: url("image.jpg");
background-color: white;
background-position: center;
background-repeat: no-repeat;
background-size: auto 100%;
}
Image 1 1920X1080:
Image 2 1400X1050:
As you can see from image 1 i design it at resolution 1920X1080 and it look awesome, but when I open it at resolution 1400X1050 it looks so horrible as like in pict 2. Can anyone suggest me the best solution for this case?
Heres my background CSS:
body {
background-image: url(images/background-photo.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% auto;
background-color:#245528;
}
/* For mobile devices */
#media only screen and (max-width: 767px) {
body {
background-image: url(images/background-photo-mobile-devices.jpg);
background-size: cover;
}
}
If you want to show images in good way in different resolutions then you need to have different images for different resolutions. You can implement it by using srcset:
<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">
Source: Responsive Images: If you’re just changing resolutions
I think the right style for your case is
background-size: contain;
instead of
background-size: 100% auto;
the contain will always keep the image shown in your container element, so when the width or height is too small for the image, it will try to resize the image, so that the entire image is shown(with possibly blank area on the top/left or bottom/right). Instead, the 100% auto will always try to stretch the image to make it as wide as the screen.
I'm writing an html page with parallax using stellar.js.
In CSS I use:
html, body {height: 100%;}
#slide1 {
height: auto;
background-image:url('../images/1.jpg');
background-color:#fff;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed; }
But the image is cut and the bottom of the image is not visible.
Is it possible to set the height of the section (#slide1) to show all the image?
Using background-size:cover; will always crop your background image either vertically or horizontally, except when the element has the exact same h/w ratio as the image. The key is to choose and position the background in such manner that it still looks good when it is cut.
Most likely, you want to give your element a min-height, e.g.:
#slide1 {
min-height: 600px;
}
Keep in mind the most popular desktop ratio is 16:9 and most mobile devices are held vertically. If necessary, use #media queries for different device/viewport widths.
If you don't want your slide to have a larger height than the viewport height (deviceScreen|browser height), add max-height: 100vh!important; to the above rule (useful on mobile devices).
Try setting #slide1 height property to 100% instead of using auto.