EDIT: Sorry, I realise it wasn't so clear, I'll try to clarify.
What I searching for is something that helps me to "zoom"/"scale" my background-image within the div when adjusting the height (not the width) of the browser window. (See attached image)
So far I've only managed to get the image to crop but still being centered using the code below.
Anyone have a solution for this?
Image of what I'm trying to achieve:
http://imgur.com/a/zJgF4
.wrap {
height: 50%
background-color: red;
overflow: hidden;
position: relative;
background-size: cover;
}
.image {
position: absolute;
left: 50%;
margin-left: -1020px;
background:url('https://placebear.com/2040/866') no-repeat;
width:2040px;
height:866px;
}
<div class="wrap">
<div class="image"></div>
</div>
I think this is what you are describing.
You can use background-size: cover; so that the image always fills the container.
https://developer.mozilla.org/en/docs/Web/CSS/background-size
This will at least scale the image to the correct proportions. Then you can scale the container how you want.
You can use vh units of measurement to control the height of the image container based on the height of the browser window.
https://snook.ca/archives/html_and_css/vm-vh-units
.wrap {
height: 70vh;
background-color: red;
overflow: hidden;
position: relative;
background: url('https://placebear.com/2040/866') no-repeat;
background-size: cover;
}
<div class="wrap">
</div>
Related
I have 11_100px(height) x 3_840px(width) image that I want to fit on my website, I managed to somehow fit it for desktop size using the padding-top trick calc(height / width * 100%) to calculate aspect ratio). But when resizing viewport it becomes impossible to maintain for tablet and mobile.
Somehow I need to make the height fully reliable to the width size
I wasn't able to find any stack overflow sufficient answer, how are such large backgrounds handled for all devices?
Example: link to my example
The best way to achieve this is by adding a background image to a div.
body {
margin: 0;
}
div {
width: 100vw;
height: 100vh;
background-image: url("https://via.placeholder.com/500x500.png?text=Placeholder");
background-size: cover;
background-position: center;
}
<div></div>
You can define a background-image for bodyto which you apply the below settings (except using your own image of course).
The background image will not scroll with the content in this case - I suppose this is what you want.
body {
margin: 0;
background-image: url("https://picsum.photos/1200/1600");
background-size: cover;
background-position: center;
background-attachment: fixed;
}
You can also do this to scale the image to fit the width of the screen and if the width is too long it will be hidden.
body {
background: url("https://picsum.photos/1200/1600");
background-size: cover;
object-fit: cover;
width: 100vw;
z-index: -1;
overflow-x: hidden;
}
nav {
height: 10vh;
width: 100vw;
}
footer {
height: 10vh;
width: 100vw;
}
<html>
<head>
</head>
<body>
</body>
</html>
I have two images which get overlayed on top of each other in my application, these are represented as foreground and background. For both of these I'm using background-attachment: fixed to make sure the images are always the exact same size as each other. This allows me to add an edited version on the foreground, but still keep the two images consistent so they both look like one.
You can see an example of this below;
html,
body {
height: 100%;
width: 100%;
}
.background_container,
.foreground_container {
height: 100%;
width: 100%;
position: relative
}
.background,
.foreground {
background-image: url("https://i.redd.it/uojoraeqr4c31.png");
background-size: cover;
background-attachment: fixed;
height: 100%;
}
.foreground {
max-height: 50%;
margin: 5rem 0;
}
<div class="background_container">
<div class="background"></div>
</div>
<div class="foreground_container">
<div class="foreground"></div>
</div>
The issue I'm having is that I have a need to zoom these images in on an animation. To do this I'm using transform: scale (1.5) on a keyframe, but the more it scales, the more out of sync the two images get. I expect foreground to be scaled the exact same as the background as they are on the same plane due to background-attachment: fixed, but I'm guessing the required height and margin properties cause some issues.
html,
body {
height: 100%;
width: 100%;
}
.background_container,
.foreground_container {
height: 100%;
width: 100%;
position: relative
}
.background,
.foreground {
background-image: url("https://i.redd.it/uojoraeqr4c31.png");
background-size: cover;
background-attachment: fixed;
height: 100%;
transform: scale(1.5);
}
.foreground {
max-height: 50%;
margin: 5rem 0;
}
<div class="background_container">
<div class="background"></div>
</div>
<div class="foreground_container">
<div class="foreground"></div>
</div>
Is there any sort of solution to this? I want example 2 to look like example 1, just more zoomed in.
https://jsbin.com/nesekuxuyu/1/edit?html,css,output
See my jsbin.
Remove your foreground specific styling and add overflow: hidden; to the parent container. It was scaling properly however it was exceeding the bounds of it's parent container and by hiding the overflow you prevent it from distorting the bits you can see.
Edit In outside discussion with James I see the actual issue and am working on an appropriate solution. Scale is overridng the fixed behavior inherent in background-attachment
Let's say that I want to fit an 10*60 image into a 15*15 container. That is to say, I want to stretch my image so that the width correspond (so that would be an image of 15*90), but I do not want the height to stretch more than the width, so the bottom of my image will not appear.
When I define my html image, I put an width=100% to stretch the width, but what do I say to the height?
Thank you !
You can simply use a background image and set its background-size property to contain (or cover, depends what you need).
.container {
background: url(http://via.placeholder.com/350x300) no-repeat center center orange;
background-size: contain;
animation-duration: 3s;
animation-name: changewidth;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#keyframes changewidth {
from {
width: 100px;
height: 300px
}
to {
width: 300px;
height: 100px
}
}
<div class="container"></div>
You can also position the image absolute, so you can do something like this:
.embed.ratio-16-9
img
.embed {
position: relative;
height: 0;
overflow: hidden;
max-width: 100%;
img {
position: absolute;
top: 0;
left: 0;
right: 0;
min-width: 100%;
}
.ratio-16-9 {
padding-bottom: 56.25%;
}
The image height should no longer be stuck to you block.
If I understood the question correctly, you don't have to specify any value on the height property. Just set overflow:hidden on your container if you don't want the overflowing part of the image to show. Hope this helps.
CSS background-image with background-size: cover
You should use CSS background-image property for this kind of styling your web elements.
What you're looking for is probably the background-size: cover;. What it does is it fits the image based on width of the container.
CSS:
.cont {
width: 200px;
height: 200px;
background-image: url('urlToImage100x300.jpg');
background-size: cover;
}
HTML:
<div class="cont"></div>
Also, if you want to center your image vertically use background-position-y: center;.
.cont {
width: 200px;
height: 200px;
background-image: url('urlToImage100x300.jpg');
background-size: cover;
background-position-y: center;
}
HTML img tag
If you really need to use an <img /> tag for this operation; What you need is to put the image into container, then set the width, height to your desired size and overflow-y to hidden. After that, set the width of an img to 100% and it's done.
CSS:
.cont {
width: 200px;
height: 200px;
overflow-y: hidden;
}
.cont img {
width: 100%;
}
HTML:
<div class="cont"><img src="image100x300.jpg" /></div>
Working demo CSS w/o y-axis center: https://jsfiddle.net/e2vt3sw6/
Working demo CSS w/ y-axis center: https://jsfiddle.net/e2vt3sw6/1/
Working demo HTML img tag: https://jsfiddle.net/e2vt3sw6/2/
Tests where made using 150x300px image and 200x200px container
The effect I'm trying to achieve is the first main picture on this website: http://shop.soot.me/
As far as I can tell, this is being achieved by background, not <img>. Is it possible to achieve this with the <img> tag? I tried my hand in it, but it's not exactly there.
https://jsfiddle.net/jzhang172/e1javm23/
.box{
width:100%;
height:500px;
background:black;
overflow:hidden;
}
.box img{
max-width:190%;
min-height:100%;
}
<div class="box">
<img src="http://www.hdwallpapersnew.net/wp-content/uploads/2015/12/landscape-desktop-hd-wallpaper-images.jpg">
</div>
Here is a fiddle of code that fills the image to 100% of the width of the box container. https://jsfiddle.net/9pjxeo6o/
Is this what you are looking to do? The website that you referenced actually does use the background property to create the effect that you are talking about. I suspect that this is actually what you are wanting to do, rather than just using an image. This code handles the background cover:
.homepage-hero-video, .homepage-hero-image {
display: block;
background-size: cover;
background-position: center center;
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
right: 0;
z-index: 1;
}
The background-size: cover; stretches the image to the width of the container automatically.
I have element with:
background-image url('../images/belly.png')
background-position 50% 50%
background-repeat no-repeat
background-attachment fixed
background-size cover
And underlying element with position: fixed;
And if I scroll page background is not redrawing. Problem appear in Chrome. Any solution?
demo: http://silentimp.github.io/90daysofbelly/
video: https://www.youtube.com/watch?v=av6jZciNszo&feature=youtu.be
I have noticed the best way to make sure the page backgound stays fixed no matter what is: place it as the background image of an empty first child of body, with these CSS rules:
.background-holder {
position: fixed;
width: 100%;
height: 100%;
display: block;
z-index: -10;
background-image: url(//link-to-image);
background-size: cover;
}
And here's the page structure:
<html>
<head>
</head>
<body>
<div class="background-holder"></div>
<div class="main-container">
<!-- content goes here -->
</div>
</body>
</html>
I had the same issue you had and struggled with it for almost 3 days. But as of June 2020 and improving on #tao's answer, here is a reliable solution I found for this that works on all devices and has 100% browser compatibility. It allows the desired effect in any place of the page and not just the top or bottom of the page, and you can create as many as you need or want.
The only known issue is with safari. The browser repaints the whole image every scroll movement so it puts a heavy burden on graphics and most of the time makes the image flicker up and down some 10px. There is literally no fix for this, but I think there is also no better response for your inquire.
I hope this works for you. You can check the results live in www.theargw.com, where I have three different fixed background images.
body, .black {
width: 100%;
height: 200px;
background: black;
}
.e-with-fixed-bg {
width: 100%;
height: 300px;
/* Important */
position: relative;
}
.bg-wrap {
clip: rect(0, auto, auto, 0);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.bg {
position: fixed;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center center;
background-image: url(https://images.pexels.com/photos/949587/pexels-photo-949587.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500);
transform: translateZ(0);
will-change: transform;
}
.e-container {
z-index: 1;
color: white;
background: transparent;
}
<div class="black"></div>
<div class="e-with-fixed-bg">
<div class="bg-wrap">
<div class="bg"></div>
</div>
<div class="e-container">
<h1>This works well enought</h1>
</div>
</div>
<div class="black"></div>
--------------------- EDIT ---------------------
The code posted was missing the background wrapper that allows the background to not change size and maintain the fixed position. Sorry to post the wrong code this morning guys! But here is the change.