I have a div that I'd like to use a fixed background on. I'm also using background-size cover in order to get the best fit from the bg image.
The trouble is that the background image scales as if it were to cover the div's parent. Not the div itself. Is there any way to fix this?
.panel-image {
height:100vh;
width:50%;
background-size:cover;
background-attachment:fixed;
background-position:center;
background-image:my-image.jpg;
}
.parent{
height:100vh;
}
Here is an online example. The panel-image div is square, as is the source image, yet the image is still heavily cropped as if panel-image div were much wider:
http://jsbin.com/siweloxebe/edit?html,css,output
It's because you've set the height of the child div the same as the parent.
I've played around with your code here and it seems fine, or I may have misunderstood your question
Related
I'm using centered imgs to act as backgrounds for some tiles. I'm trying to have these images scale with their parent div's height and if they are wider then their parent's for them to hide the overflow.
Example:
* I've got it working now. Answers are below, I'm updating this code to display all I needed to use to get it to work *
HTML
<div class="container">
<img class="derp" src="http://gridiculo.us/images/kitty02.jpg">
</div>
CSS:
.container {
height:250px;
width:50%;
}
.derp{
object-fit: cover;
height: 100%;
width: 100%;
}
Here's a near-example: http://codepen.io/chriscoyier/pen/myPMGB
The difference would be that I'm using s and not background-image, and that instead of the img filling the div completely it would fit to the height and hide the width overflow.
I'm trying to avoid using background-image since I'm using a lot of these tiles and making CSS rules for every one isn't going to work.
In order to scale it with the div's height, I'd change the height from px to % - this way, the larger's the div, the larger's the picture. In order to certain the image, i'd use margin in the image css. That'd look like so:
.derp{
height:80%;
width:80%;
margin:10%;
}
.container {
height:250px;
width:50%; /* needed */
/* inner img is centered horizontally */
vertical-align:top;
text-align:center;
overflow-x:hidden;
}
<div class="container" style="background-color:gray"> <!-- The background is there so you could see the image relative to the div -->
<img class="derp" src="http://gridiculo.us/images/kitty02.jpg">
</div>
The best way to keep the aspect ratio of the image is to set the width to auto (and it's the default behavior so you don't need to set explicitly). And with a simple overflow:hidden it works almost as you want it.
The hard part is centering horizontally. You can try this answer :css to center a image horizontally.
However if all your images aren't the same size, you will need to make one rule per image. And in this case putting the image as background-img would be better for semantic and accessibility (because your image doesn't have a sense in the page, it doesn't convey any information, it's decoration). An <img> would be read by a screen reader (the alt attribute), and in your case it wouldn't help a blind people.
Depending on how many browsers you need to support, I'd suggest you use object-fit! Support for it is okay if you can ignore IE, but in case your project qualifies, I see no problem with using it today. Also, there is always a polyfill.
You can find a nice summary on CSS-Tricks.com about the property. It basically works similarly to background-size, but for <img> tags. In your case, object-fit: cover; does the trick.
I made a little demo on CodePen that shows you how it works.
img {
height: 100%;
object-fit: fill;
width: 100%;
}
The div in which I have a background image is of unknown size. It can be 16px high, it can be 1600px, and anything in between. There's a background-image in there that's roughly 440px wide and 250px high.
When the div is higher than 250px, the background image doesn't scale. That's desired behaviour. So far so good.
If the div gets under 250px in height, the background-image is clipped. That's unwanted: I want it to scale to the div's smaller height.
How do I use css (or, if not possible, js) to have a background-image scale down when it doesn't fit its div, but never scale up when the div is bigger than itself? Essentially, I want to use background-size: contain;, but with a max set to the image's height.
I tried all kinds of cover and contains, but none have the desired effect.
This question does not help either, for I cannot set a max-height on the div. It contains content added by the site's editor. If that's a lot, all of it must show.
Here's a fiddle: http://jsfiddle.net/Bakabaka/2zetkrg0/
Is simply inserting an img inside the element you wanted to give a background to an option?
You can use max-width:100%; max-height:100%; on the image, so it will not exceed the container dimensions, but will still retain its aspect ratio and won't grow larger than its original size. Next, you could position the image absolutely and give it z-index:-1 so it'll be behind all the content and won't be affected by it. Finally, just give the image top:50%; left:50%; transform:translate(50%,50%); if you want it centered within its container.
Here's a demo: https://jsfiddle.net/ilpo/9dnqd6bc/1/
You could even set min-width and min-height, if you wanted to have a minimum size for the background.
Try this, hope it'll work :)
container{
background-image: url("/assets/pic.jpg");
background-size: cover;
background-repeat: no-repeat;
max-height:250px;
}
I've made my background image responsive in my :after psuedo but not able to control the height responsiveness so I end up with a big white space at the bottom of my image.
My CSS:
.element:after {
content:'';
background:url('http://i57.tinypic.com/4kdytv.png') no-repeat;
background-size:100%;
height:284px;
display:block;
}
Fiddle: http://jsfiddle.net/w6amht6o/
I've seen a couple other questions like this but none of them discuss making the height responsive. I seen you could try something like "background-width:100% 100%;" but this did not work for me.
Let me know what I am doing wrong!
No such thing as background-width in CSS. You're thinking of background-size, which should do exactly what you're describing.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
Yes! I did searched for related issues as it seems to be an easy question! However the solutions given on other topics do not solve my issue!
Im using an area filled with divs (CSS3 Box). Multiple rows with multiple divs
Each div gets his own picture that needs to stretch to fit the width and height of the div! (no matter what resolution).
Currently only the width stretch works. Height stretching seems to stretch it over all rows.
Fiddle to show you guys http://jsfiddle.net/h2Ya8/32/
Any solutions?
I'm not sure if it's what you're looking for, but adding
.product {
position:relative;
and
.product img{
width:100%;
height:100%;
position:absolute;
bottom:0; right:0;
}
seems to force the image to width/height of the container.
Check the demo.
Do you need to preserve the ratio?
.. expecting the picture to get "cropped" at the top and bottom. I only want it to fit the width 100%, and wish to become bigger than the height, but not leave the certain container.
How is that done?
Your question is a bit vauge if you meant you wanted an img to stretch to the full width off a container but the height too get cut off then you want something like this.
.container{
width:300px;
height:300px;
overflow:hidden;
display:block;}
.container img{
width:100%;
vertical-align:middle;
}
Just set the container's css overflow property to hidden, give it a fixed size, put your image inside with a fixed width, and done :)
Well, almost done. To get it cropped at the top and bottom, you need to get the image vertically centered in the box. One hack to achieve this is to have tiny text nodes on either side of the image, having a line-height the same as the container div height. Giving the image vertical-align:middle should center it vertically within your div.