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.
Related
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/
The best example of what I need would be the picture behind the search bar on http://shutterstock.com. Try to unzoom (ctrl and - on Chrome) ; the rest of the website will size down; the image itself will remain the same size, it will only be cropped as its height decreases.
Basically, I need the background image to be responsive and full width on an otherwise unresponsive and 960px theme.
It's giving me a bad headache so far; I can't figure out how to do it.
Any ideas?
I think you're looking for background-size. FYI, this doesn't work in IE8 and below I believe.
.your-class {
background:url('images/yourimage.jpg');
background-size:cover;
}
body {
background-image: url(blah.jpg);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
'cover' will make the background image rescale based on the container's size
'fix' will make the background image positton stay fixed when u scroll down
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.
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.