I'm trying to make my background image on my splash page resize to smaller sizes. I want the image to cover the entire section whatever size screen it may be.
.splash{
background-image: url("../images/lanternboys_medium.jpg");
background-size: cover;
height: 100vh;
width: 100%;
margin: 0;
padding-bottom: 40px;}
When I view this on my ipad the picture is huge! I've read that others have tried removing the height and width and set background size as "contain" but it doesn't stretch to what I want without the "cover" function.
The current size of the picture is 1366x911 but I do have a larger size of 5184x3456.
Any tips would be greatly appreciated!
Most of the time, vw and vh units doesn't work properly on iOS devices. Maybe if you set your background height to 100% and the background width to auto? Since your height is smaller than the width, it should do the trick.
Related
I'm working on a project where I have to give a background-image a full width. The image should become larger as I make the screen larger, and smaller as I make the screen smaller.
This is my code at the moment. It's a footer decoration:
.footerDeco {
background-image: url(../resources/image_geometry_2.svg);
background-repeat: no-repeat;
height: 160px;
background-size: cover;
}
The background-size: cover makes the image adapt to full width, but the height of the image remains 160px no matter what. If I make the height larger, then it's a problem because it doesn't shrink back proportionally as the screen becomes smaller.
I have tried giving it a height auto or a height 100% expecting the height to change proportionally to the width. (I do understand this height is the height of the footer container, but I don't know how to change it otherwise).
I know it would be much easier to use an img tag. But the demands of the project and good practice insist that since this is a decoration, I should use the background-image property. Is it possible? Thanks!
P.S.: There are similar questions that have been answered here, but none of them (as far as I can tell) solve the problem of the image resizing past the constant container height of 16px.
To make the height change proportionally to the width, you can use vw to specify the height, for example:
.rooterDeco {
height: 20vw;
}
maybe for a size of 100% it will work
background-size: 100% 100%;
using percentage makes the element one size relative to the size of the parent element.
You can use aspect-ratio.
.footerDeco {
aspect-ratio: 16 / 9;
background: url(https://www.fillmurray.com/g/300/200);
background-size: cover;
}
<div class="footerDeco"></div>
I am trying to make a slider with background images, when I am trying to make it fit to the mobile screen, the proportion is affected and look as pixels, how can I resize the background-image to fit the mobile screen without affecting the proportion.
and when I increase the height to :
background-size: 100vw 55vh !important;
height: 55vh !important;
You can use the object-fit property to maintain the aspect ratio of the image:
img {
height: 55vh
object-fit: contain;
}
contain - The replaced content is scaled to maintain its aspect ratio while fitting within the element's content box.
Instead of fixing both height and width of the image, just define the one which you need (for example width) and set the other one to auto. For height that would be:
background-size: auto 55vh;
height: 55vh;
that way the original image proportion will be kept, avoiding a distorted image.
you can use this CSS:
{
background-size: contain;
background-repeat: no-repeat;
}
if it didn't work please share your code. I know I can help you.
I have added a background image to my header and it looks great at smaller size but I lose the full image at larger size. here is the code I have so far
.fusion-top-header .fusion-header {
background-image: url("http://127.0.0.1/OTG/wp-content/uploads/2020/01/sunset_background.jpg")!important;
background-size: cover;
background-repeat: none;
background-position: center center;
}
I want all screen size to have the image look like what it is in the small screen one. I have the logo and menu moving and adjusting for screen size just not the image
Any help would be great.
Thanks
Problem is this:
When you enlarge your screen height of your element .fusion-header remains the same. Since background-size is cover your image is trying to be full width, hence automatically gaining height.
You have option to set background-size to contain and background-position center, or you have option to adjust your .fusion-header height via vw/vh units.
As far as I know I can' t say that there is anything else.
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/
I need to let the image full of the entire browser,but the image's width and height pixel is fixed.How to make it fix different size of screens.Can i make the background image stretch using css?
You can do it with:
background-size: 100%;
If you want to control the height and width, you can do it like this:
background-size: 100% 100%;
However, not all browsers have implemented this feature yet.