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/
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;
}
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.
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.
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.
I have this part of HTML file
<div id="header">
...
</div>
and this part of CSS file
#header {
background: url("img.png");
background-repeat: no-repeat;
background-position: left top;
height: 140px;
margin: 0px auto;
}
The size of img.png is 1290 x 150 pixels. Everything was OK, but after I opened the web in sister's laptop the image is not stretched over all monitor (horizontally). There is about 50 pixels gap from the right.Is there some general solution, so that the web will display same on all monitors?
thank you
It all depends on different screen resolutions useed by different monitors/devices.
You could let the image stretch to the size of the monitor if you use an image tag to display the image, and specify its width and height properties to be 100%, but that will result in a stretched image depending of the device used...
I suggest you to look for some tutorials about centering images while occupying all the avaiable space without blank space, and retaining image proportions at the same time.
your css code will not strech your background immage, it will only not repeat. as far as I know CSS wont even do that (streching an is possibe )