I want to create a jumbotron that behaves like the one on the opening page of this site:
Website
No matter what size the viewport, it always fills the page with that gif and the rest of the site has sections which scale accordingly. Also no matter how you adjust the viewport, it does not distort the gif; it just re-scales or adjusts accordingly
I tried the following:
<div class="container-fluid special";>
<div class="jumbotron" style="background: url(chillin.jpg) no-repeat center center;-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;" ></div>
</div>
But it distorts as you change the viewport. What am I missing, do I just need to add some media queries?
By setting background-size to 100%, you're telling the browser to stretch the background to fill it's container, which will cause undesired distortion. Instead, try using background-size: cover. This tells the browser to make the image as large as necessary to completely fill it's container without distorting the image. Another way to think about it is that background-size: cover will minimally "crop" the image until it fits perfectly in it's container. (As a side note, background-size: contain tells the browser to make the image as large as possible without cropping the image, but this will result in white space above or below the image if the container is not the same size as the image.)
Related
I have the following website:
www.thewhozoo.com
When viewed from a screen with a width of more than 1240px, it displays the images side by side. With a screen below 1240px (e.g. mobile phone), it displays the images beneath each other. This is achieved using:
#media only screen and (max-width: 1240px) {
This all works fine.
My problem however is with the background image:
.top-container {
float: left;
width: 100%;
background: linear-gradient( rgba(0,0,0,0.1), rgba(0, 0, 0, 0.1) ),url('../images/background1.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
When the browser is wide enough (e.g. 930px here), it displays:
But with a narrower browser (e.g. 480px here) or a mobile device, it displays:
As you can see, in the image, the background work "WORK" gets chopped off in the second screen.
Question
Is it possible in css, to set a minimum width, so that the word "WORK" will always be visible, no matter the size of the browser?
This will give smaller browsers the effect as if they are viewing the page from further away (zoomed out).
Thank you.
The background-size: cover setting makes sure the whole element is always filled by the background images. In your case, the mobile version displays the complete height of the image and centers it horizontally, this way cutting something off at the left and right. If you would display it smaller (which would be necessary to see the whole word "work"), the height would shrink too, and the image wouldn't fill the window anymore.
You can try background-size: contain instead, which will always display the whole image, but will leave empty space on either top and bottom or left and right, depending on the orientation. But combined with a background color, this might be something you can live with.
Try background-size: 100% 100%, or background-size: 100%
Hope this helps!
What you can do is make two copies of the background image, when the browser is resized to the minimum width you can use javascript(jquery) to swap the background image from large to small version.
Or you can style the background like:
background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;
What I want to do on the background image is to expand width or height depending on the ratio of the browser size compared to that of the background image.
In this one the image is (almost) not streched; and I want the image to keep its original ratio. Basically, The width and height of background image would follow those of the browser screen.
In this screenshot, the image must be expanded to up and down because its width/height ratio is larger than the original. And the exceeded parts should be out of the browser pane.
In this one, the width/height ratio is smaller; as long as keeping its ratio and fitting the image height to the browser's height, the image should be stretched to left and right.
Hope you to understand what I want to do.. I think I might have to use something like if-then statement to detect the browser ratio and respectively change which side to fit to the image. Or are some other techs required to do this task?
Without the help of Javascript, I would suggest to use:
body {
background-image: url(image.jpg);
background-position: 50% 50%;
background-size: cover;
}
The background-position: 50% 50% will center the image horizontally and vertically. The background-size: cover will make the image cover the whole body.
Demo
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 have this jsfiddle: http://jsfiddle.net/SoSoDef/uhx3o62f/1/. It seems to work fine, the only issue
is that the image will be cut of a little bit at the top and at the bottom for some reason.
-webkit-background-size: cover;
Why ?
Appreciate all your help
The background image is being cut off due to CSS styling in relation to the dimensions of the JSFiddle Result viewport.
The CSS property 'background-size: cover' is constraining and scaling the image's overall proportional size based on the width of the JSFiddle viewport.
In your background property for the body style, 'center center fixed' is centering the center point of your image in a fixed position to the center of the viewport. If the scaled image (constrained by the width of the viewport) is taller than the viewport itself, the image is merely going beyond the upper and lower bounds of the JSFiddle Result viewport, and appearing clipped.
To illustrate, try removing 'center center fixed' from your background property on the body style, like this:
body {
background: url("http://f.cl.ly/items/260T100F3j2Y3L1S0g1w/bg.jpg") no-repeat #292929;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
The image will now position itself to the top of the viewport, and will no longer be clipped along the upper edge. Then, narrow the Result viewport, and the image will no longer be clipped along the bottom once it has sufficiently diminished in size.
I suspect that you are trying to scale your image to the available dimensions of the viewport, both horizontally and vertically. However, at any given time, you have a viewport of a random size, as well as an image that is of a certain aspect ratio. If you do not want to forcibly squash the image vertically or horizontally in order to achieve a total image fill, you must allow the image to scale in relationship to the width of the viewport (and potentially be clipped along the bottom edge), as suggested in this SO Answer.
If the content of the image cannot be clipped and must be viewable, instead of using CSS to place your image, use an 'img' element and scale that with CSS. The viewport will then be scrollable if the image content does go beyond the viewport's available dimensions.
I've created a codepen example of this latter approach for you.
From [W3Schools]
Cover: Scale the background image to be as large as possible so that
the background area is completely covered by the background image.
Some parts of the background image may not be in view within the
background positioning area
So basically it is behaving normally, when the body gets wider, the top and bottom of the background image will be cut off.
You could use contain instead and add a white background to keep the entire image at all times.
-webkit-background-size: cover;
background-color:white;
The background-size property let you expand and shrink according to size your div. Its responsive for more reference check out this LINK
See my example here - http://jsbin.com/kutobedo/1/edit
When you shrink the browser window, the image resizes correctly and maintains it's aspect ratio. However I want the image to always stretch to fill the screen, but in this case it never stretches beyond it's native resolution.
If I set width:100% instead of max-width. It will stretch the image to fit the width but if you shrink the window vertically, it will start to distort the image.
If I set height: 100% instead of max-height I get overflow/scrollbars instead.
So I'm a bit stuck! Please note the images will be of different aspect ratios and resolutions.
I suppose in the long run, this might not be a good idea as a 1024x768 image blown up on a 4k screen may look a little nasty. Still would like a solution for now though.
Set image as background of a div & use background-size:cover;. This will stretch it to fill screen without losing aspect ratio, no matter what are image dimentions are.
With the property »cover« the image is scaled up to the entire background until the whole background is covered therewith. More at http://en.aufdemdach.org/css-en/css-center-background-images/
Example:
body{
background: url("http://lorempixel.com/g/1000/1000/") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}