I have a div with a background image set to it. It looks completely fine on smaller mobile screens.
However, as I move to larger and longer mobile screens, the image overflows from the sides. Basically some part of the image gets cut on larger mobile screens. How can I prevent this? And can I do it without editing the image itself?
Here's the website: https://www.elevarsports.com/pages/elevar-arc-racer-v2-beta#
This is the class to look at .es-element-hero-imgtxt-mobile-img.
I have already tried setting max-width: 100% but that doesn't do anything.
These are examples:
iPhone 6/7/8 (how it's supposed to look on all mobile screens
iPhone XS Max (how it looks on bigger and longer screens)
Note: I'm using Firefox as my browser.
You could try something like:
#media (max-aspect-ratio: 720/900) {
.es-shoe-landing-hero .slide-1 {
background-size: contain !important;
background-position: top !important;
background-color: #000;
}
}
This changes how the first hero slide's background image is sized and positioned. 720/900 is the dimensions of the image and is being used to determine an aspect ratio at which this style is applied.
However, then your problem becomes that the image isn't tall enough for the view.
Related
I have a background image that exceeds the height of the browser. How might I incorporate the image so that I can scroll down to see the remaining portion while maintaining the scale across different browser sizes? Code that I have written or used only clips the image to fit the size of the browser. Overflow seems to have no affect.
Depending on the end result you're looking for, here are some approaches and tools you could consider.
because of the different aspect ratios of desktop and mobile screens, it's sometimes difficult to have a single background image that will work well for everyone. But if you prepare a desktop background image of say 1920px wide by 1080px high, and a mobile background image of say 640px wide by 960px high, you can use media queries to specify different backgrounds for different viewports.
more info: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images
#media(max-width:480px){
body{
background-image:URL(mobile-background.jpg);
}
}
#media(min-width:481px){
body{
background-image:URL(desktop-background.jpg);
}
}
background image size of cover or contain are also really useful. Specifying contain means that the background image will be scaled to fit the size of the element it's applied to.
And specifying cover means that it will fill the background of the element it's applied to, and you should expect some croping of the background image. You can also position the image.
more info: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
div{
background-size: contain;
/* or */
background-size: cover;
background-position: center;
}
and sometimes you might want to stop the background from scrolling:
more info: https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment
div{
background-attachment: fixed;
}
Using Object fit, if I set the height to 100vh it works properly, though if I change it to anything else, it no longer remains the correct size but shrinks down to fill the space as the window shrinks.
Is it possible to keep it proportional like at 100vh but to not actually have it take up the full amount of available space? I am ok with portions of the video being clipped off, I just cant seem to figure out how to get this to work.
Basically what I want is that on mobile 100vh is fine, I have text overlay on top of the video so the extra space works. But on large screens, there is too much unused space over this video (another as well on the full site but figure the same methods can be used to fix that also) and I would like to probably shrink it down to closer to 50 to 65% of the total size.
Below is the CSS I am using on the video currently, there is also a link to a live site of the video since I dont believe I can upload that to SO.
https://tsukiyonocm.github.io/test/
#services {
position: relative;
}
#servicesVid {
height: 100vh;
width: auto;
position: relative;
-o-object-fit: cover;
object-fit: cover;
}
your question is not very clear but i would recommend using Media queries to apply different styles for different media types/devices.
for example if you want to set a specific style for larger screen devices such as laptop you have to use :
#media screen and (min-width: 1400px) {
//your style for these devices that have 1400px+ screen width
}
I have a background image on a big div below the fold... when I load the page on my iPhone and I scroll down, the image shows up only after I scroll past the top edge of the div (a small delay essentially)...
It does happen only mobile.
I'm wondering if it's because the photos are too heavy or else...
Any help is appreciated!
Your image has a very big size.
You have to make image size smaller and load it only for tablets/mobiles.
CSS code will be like this:
#media (max-width: 768px) { .mydiv { background-image: url('images_folder/smaller_image.jpg')}}
How to well display a background image no matter what the size of the screen is?
Is there a preferred image size to work with?
I'm trying the new CSS3 background size attributes (cover) but I can't get a result that works well with small and big screens. I also tried different media queries but it did not work.
Do I have to create several versions of the image for different screens?
Small screen
Big screen
As you can see, on a big screen, it is like it is zoomed in so it does not display the main part of the picture anymore.
How to fix this?
The image comes from unsplash and I did not resize it.
Thanks for your help.
The problem here is that your background area has an aspect ratio of almost 4:1 which is very wide. The picture however has an aspect ratio of almost 4:3.
This is why it becomes a problem in bigger screens. The picture just isn't wide enough.
There are different solutions to this, you could for example have the picture stretch to fit any width. But that might not be the desired behavior.
This is what I would do:
Demo - try resizing window to see behavior.
div {
width: 100%;
height: 500px;
background-image: url('...');
background-size: cover;
background-position: 50% 50%;
}
The background-size: cover property sets the picture to always fit it's entire width inside the container (though height will be cut off if it doesn't fit).
The background-position: 50% 50% sets the background to always be centered. This way, if the background cuts off, you will still see the center of the picture which is probably the most interesting portion of the picture.
Is there a way to make a website 100% fluid?
As in, fill the background edge-to-edge with an image, no matter the size of the browser window. Also, have it resize larger or smaller as the browser window changes without neccesarily retaining aspect ratio. Images inside divs and font sizes should obviously resize accordingly and maintain the same amount of white space so the page shows exactly the same content in screens from 800x600 to 4K Ultra HD, being the idea to above any kind of vertical scrollbar. Let's forget about mobile and tablets for a moment.
What I have tried for background:
body {
background-image: url(./Si0rPf7.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
Which will fit background as long as the aspect ratio of the image is kept, the moment it changes you will see white spaces on both sides. If cover instead of contain, image will get cropped, which is undesirable if we want to show our whole background to everyone, even if we have to stretch it.
Now, for img src I've had half success with two methods:
.image_1 {width: 100%; height: auto;}
and
<img src="img/image_1.jpg" width="100%"/>
None of them seems able to react to both width and height. Looks like you have to choose between one or other.
For font-size I would just use vw and hope for the best.
You want
background-size:100% 100%;
You should look into the flex model: https://philipwalton.github.io/solved-by-flexbox/demos/grids/