I have an background image that I can set with an img tag or through background-image. I'd like the image to always stay centered in the browser. Then when resizing the browser I want the image to stay full size and start hiding the overflow on both the left and the right. The overflow should get clipped on both sides of the image so the center of the image is always in the center.
Try something like this, may need to change slightly depending on your page layout.
.parentElement {
position: relative;
float: left;
width: 500px;
height: 200px;
overflow: hidden;
}
.parentElement img {
position: absolute;
min-width: 100%;
min-height: 100%;
max-width: 200%;
max-height: 200%;
top: -999px;
right: -999px;
bottom: -999px;
left: -999px;
margin: auto !important;
width: initial;
}
https://jsfiddle.net/409u4zop/4/
If you want to use background image you back just do
background-position: center;
Add background size and position
background-size: cover;
background-position: center;
background-size: 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
Related
I think I have an impossible task but before giving up on this I want to be sure that it's really not possible. Maybe it's possible with millions of media queries, but that isn't worth the struggle.
However, I have a backgroundimage with a height of 100vh, meaning it's always 100% height of the users window, and a width of 100%. These two things might make my task impossible.
Within the background image I have another image which should always be on that position, no matter what.
I came up with an example. I want the rocket always stay on that rectangle on the planet. I made this possible on my screen, but it could slip on your screen due different screen sizes.
(stackoverflow doesn't allow images with http, so please change the image src to http or take a look at my codepen: https://codepen.io/anon/pen/yjXbPL)
.background {
background-repeat: no-repeat;
background-image: url("https://wallpaper-house.com/data/out/7/wallpaper2you_191762.jpg");
background-size: cover;
background-position: center center;
height: 100vh;
width: 100%;
}
img {
width: 150px;
position: fixed;
top: 240px;
right: 780px;
transform: rotate(-20deg)
}
<div class="background">
<img src="https://www.myiconfinder.com/uploads/iconsets/256-256-7647188dd0df401f7ec5c5358a0af9a1-rocket.png">
</div>
Is this possible?
Use Position fixed as u do.
Use Left and top, not right.
Put the image beside the background div not in it.
Attached codesnippet shows you a solution. It is based on that you put your rocket and background in 2 different divs and stack them by using CSS-index.
Further on, the rocket is positioned fixed and I added a height of the background that makes it a bit scrollable.
Now, to solve the graphical split of the rocket and the background image you would have to create them as 2 different images and place them into each respective div in the HTML (see codesnippet).
In terms of using different devices you would have to test how the rocket might change position and solve that through a combination of media queries, and potentially use % position instead of px (to position the rocket correct):
.background-pic {
position: absolute;
z-index: 1;
width: 200px;
height: 1000px;
background-color: darkblue;
}
.rocket {
position: fixed;
z-index: 2;
width: 50px;
height: 50px;
background-color: orange;
margin: 100px 0px 0px 100px;
}
<div class="background-pic"></div>
<div class="rocket"></div>
The reason why this can be really hard to achieve is because you're using background-size: cover; which means stretch the image while keeping its aspect ratio and crop the image in order to fit its container's height and width. When you combine this with background-position: center center; it will crop on the edges equally. Then finally you're using two different kinds of measurement units: height: 100vh; width: 100%;
The question then becomes, before the image is cropped, what's the new width and height for the image that "cover" is applying?
This is something very difficult for CSS to determine because it requires things like knowing the ratio of your image (2560x1600 has a ratio of 1.6:1), then trying to fit it inside a container of variable width and height such that it is just small enough to fill it, while cropping out anything left out, before it is cropped, what is the actual size of the image?
Both height: 100vh; and width: 100%; will affect its size, in the manner explained above. As this requires comparing the image's original height and width, with the container's width and height to determine how to stretch the image, trying to figure this sort of math out with pure CSS isn't an easy feat for CSS to achieve without some assistance from JavaScript.
A decent solution is to add a bunch of transparency to the rocket image so it has the same size as the background so it can also go through the same "cover" stretching and cropping logic.
Give this a shot:
https://codepen.io/anon/pen/xjrPvM
HTML:
<div class="background" data-comment="2560x1600 has an aspect ratio of 1.6:1">
<div class="rocket">
</div>
</div>
CSS:
.background {
background-repeat: no-repeat;
background-image: url("https://wallpaper-house.com/data/out/7/wallpaper2you_191762.jpg");
background-size: cover;
background-position: center center;
height: 100vh;
width: 100%;
}
.rocket {
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
height: 100vh;
width: 100%;
background-image:
url('your-rocket-on-a-2560x1600-canvas-with-lots-of-transparency.png');
}
Within the codepen I used a base64 encoded version of "your-rocket-on-a-2560x1600-canvas-with-lots-of-transparency.png"
which is just the rocket placed on a 2560x1600 canvas I did in GIMP, transformed it -20.0 degrees moved it around so it's placed where you want it then exported it as a PNG.
Instead of using the image as background, I've used an inline image with the rocket placed on top. Then the rocket and background are made responsive relative to each other.
.background {
position: relative;
}
.background img {
max-width: 100%;
display: block;
}
#rocket {
top: 49%;
left: 47%;
width: 15%;
height: 15%;
background-image: url(http://www.myiconfinder.com/uploads/iconsets/256-256-7647188dd0df401f7ec5c5358a0af9a1-rocket.png);
background-position: top center;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
transform: rotate(-20deg)
}
<div class="background">
<img src="https://wallpaper-house.com/data/out/7/wallpaper2you_191762.jpg">
<div id="rocket"></div>
</div>
Up to some point, it's possible. Here is my solution for that, I have tried and tested your code. These are the changes to fix your code:
Set the position of the image to fixed:
img
{
width: 150px;
position: fixed;
top: 50%;
margin-top: 20px; (adjust some pixels as per your need)
right: 50%;
margin-right: -90px;(adjust some pixel as per your need)
transform: rotate(-20deg)
}
Here is the complete working example:
https://codepen.io/atulraj89/pen/MGooLr
I want a fullwidth background (with horizontal scroll) for a project that I'm working on at the moment.
I've added the following code to set the background:
.street {
position: absolute;
top: 0;
left: 50%;
background: url('../img/street.svg') no-repeat left;
background-size: cover;
width: 100%;
height: 100%;
z-index: -2;
}
That works, but then I've had a new problem, because of the background-size: cover the image only shows a part of it.
The user has to scroll horizontally, so that he or she can see the whole street image. My question is: How van I fix that? (I've already searched on the internet and maybe it is a really simple solution, so sorry for asking :))
What I have so far
Thanks!
use, background-size: 100% 100%; this will fill your entire DIV with complete image.
.street {
position: absolute;
top: 0;
left: 50%;
background: url('../img/street.svg') no-repeat left;
background-size: 100% 100%;
width: 100%;
height: 100%;
z-index: -2;
}
Here is the difference:
Percentage: Sets the width and height of the background image in percent of the parent element. The first value sets the width, the
second value sets the height. If only one value is given, the second
is set to "auto".
Cover: Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit
off one of the edges.
Contain: Resize the background image to make sure the image is fully visible
Here is a good explanation for the same
I have an SVG image and it just doesn't display the way I want.
This is the CSS code I'm using :
.container-background {
min-height: 25vh;
background-image: url("svg-image.svg");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
border-bottom: 1px solid #e9e9e9;
I also tried object fit contain / cover / every other option. I just can't get it to display right. I need it to cover the whole container.
Any ideas how to achieve this ? I ran out of options.
Try setting background-size:contain, min-height:100vh and background-size:50% (you can remove background size if you like or adjust the percentage to get it covering just right for your design).
.container-background {
min-height: 100vh;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/0/09/America_Online_logo.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
background-size: 50%; // remove this or tweak to ajust the fill amount
border-bottom: 1px solid #e9e9e9;
}
jsfiddle: https://jsfiddle.net/so099hnt/1/
Your CSS is functioning correctly, cover takes up 100% of the space maintaining the aspect ratio of the image so any excess gets cut off.
Background contain
If you would like to display the whole image then you should be using contain.
Fiddle
https://jsfiddle.net/7uca5x64/1/
Stretched background using inline image
If you would like it to take up 100% of the width and height without keeping it's aspect ratio then add it in as an inline image, but this would require a format other than SVG. You could then use absolute or fixed positioning to make it look like a background image.
img {
height: 100%;
width: 150%;
position: absolute;
left: -20%;
z-index: -1;
}
Fiddle
https://jsfiddle.net/7uca5x64/5/
Stretched background using inline SVG
If you have to use SVG, you will have to inline it into the HTML and then you can control it via CSS. You will also have to add preserveAspectRatio="none" to the SVG.
svg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
}
Fiddle
https://jsfiddle.net/7uca5x64/6/
How can one without using JS achieve these effects all together with any image (both large and small, with arbitrary size ratio) and any container sizes (but fixed).
image is centered both horizontally and vertically with respect to container
image aspect ratio is preserved
if image width/height is larger than that of container, than image height is 100% of container, and image is cropped by width. If width/height of image is smaller than that of container, than image width is 100% of container, and image is cropped by height.
I know about solution using background image.
Please offer only solutions with <img>
It's as simple as:
background-size: cover;
background-position: center center;
Obviously this only works for background images, for actual image elements you might want to look into CSS3 flexbox.
You cna wrap it in a container like this and control its size with min values, although if your screen is smaller than the image width it will just crop everywhere.
img {
position: absolute;
left: 0;
left: calc(50%);
top: 0;
top: calc(50%);
transform: translate(-50%,-50%);
min-width: 100%;
min-height: 100%;
}
You can add media queries to solve the size issue, though:
#media all and (orientation:landscape){
width: 100vmax;
min-width: 0; min-height: 0;
}
#media all and (orientation:portrait){
height: 100vmax;
min-width: 0; min-height: 0;
}
However, easer might be the background-size: cover property and assign it as a background:
<div style="background-image: url(url/to/image.ext);"></div>
div {
background-size: cover;
background-position: 50% 50%;
}
I tried before on multiple projects, and the best thing I could get is choosing the preferred dimension, risking the other. I was never able to make it adjust to both situations, the cropping could happen only in one dimension. Here is an example (height will get cropped if too large, but width will always be 100%).
I'm interested in finding a way out of this.
.container {
overflow: hidden;
width: 400px;
height: 300px;
position:relative
}
img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto; /* this centers image inside */
width: 100%; /* this is to shrink the images of large width */
}
I'd like to set a webpage background image to scale with the browser window so that it never loses its original aspect ratio (becomes stretched), and so that the image itself stays basically centered. After the window reaches a small enough size, I want the image to overflow (disappear) on both the left and right sides, not just the right side, as it does by default if the image is absolutely positioned.
Here is an example of what I'm doing right now: http://jsfiddle.net/S59EW/2/
#background img {
position: absolute;
min-height:100%;
width: 100%;
height: auto;
top: 0;
left: 0;
}
(The image has to be within a div positioned absolutely because of some javascript I'm using that applies to it.)
If you resize the jsfiddle window you'll see that the image keeps its aspect ratio only if you don't make the window too tall. Then the image is stretched vertically.
And if you remove "height: auto" you get the same thing except the image stops resizing after a certain point and disappears on the right/bottom sides but not on the top/left sides.
#background img {
position: absolute;
min-height:100%;
width: 100%;
top: 0;
left: 0;
}
So, I need:
The background image to always occupy the entire window without scrollbars.
The image to always keep aspect ratio.
The image to overflow onto the left and right side after a certain browser size threshold, so that it remains basically centered.
Thanks everyone
You can set the div background through the CSS, that way the image will fill the div and the sides will cutoff when the div is resized smaller. This code will center the image within the div and cutoff at the edges when shrunken down:
HTML:
<div id="background"></div>
CSS:
#background {
position: absolute;
min-height:100%;
width: 100%;
height: auto;
top: 0;
left: 0;
background: url(http://2.bp.blogspot.com/-ayEwJpMGTPQ/USqliwPWo1I/AAAAAAAAHtI/ab6NHVy0Q48/s1600/tree.jpg) no-repeat center center;
-webkit-background-size: cover; /* Add in these */
-moz-background-size: cover; /* four lines to */
-o-background-size: cover; /* remove the white space*/
background-size: cover; /* around images */
}
JSFiddle
and full screen JSFiddle
Updated JSFiddle with background-size property included to remove white space
Updated full screen version
Updated with slideshow
Updated fullscreen with slideshow
You may need to play with the aspect ratio of the background photos in order to get the look you want.
I have these two options, one is CSS only but it would need media queries at a small width.
Here is the background image JSFIDDLE, in this one it will scale exactly how you want it.
Finally, drum roll please, if you need the image to be a tag its self and act this way well there is a FIDDLE for that. :p
First CSS,
#background img {
position: absolute;
min-height:100%;
width: 100%;
height: auto;
margin-top: -40%;
top: 50%;
left: 0;
}
#media only screen and (max-width: 1700px) {
#background img {
margin-top: 0;
top: 0;
}
}