This question already has answers here:
Using percentage values with background-position on a linear-gradient
(2 answers)
Closed 3 years ago.
I'm trying to hide a background-image (that is scaled with background-size) using background-position.
I'm purposely not using visibility or anything that will cause a relayout as such has been causing minor fluctuations in the rendered output when toggling back into view. Additionally, my current application limits me from using pseudo-elements as a hack/workaround.
div {
background: url(image.png) no-repeat 200% 200%/100%;
height: 100px; /* half height of image */
width: 250px; /* half width of image */
}
Unfortunately, the image is not getting positioned. If the /100% is removed, the positioning works correctly.
jsfiddle: http://jsfiddle.net/prometh/60jtpust/
Update:
Curiously, it works when the background-size is 50%: http://jsfiddle.net/60jtpust/8/
The problem is that
3.9. Sizing Images: the ‘background-size’ property
A percentage is relative to the background positioning area.
And
3.6. Positioning Images: the ‘background-position’ property
Percentages: refer to size of background positioning area minus
size of background image, [...] where the size of the image is the
size given by ‘background-size’.
Therefore, if you use a background-size of 100%, the percentage is background-position will refer to 0. So it will be 0.
Percentage values for background-position have funky behavior with relation to background-size, which I explain in depth, complete with a sliding puzzle analogy, in this answer. Unfortunately, because the background image fits the box exactly due to background-size: 100%, you won't be able to position it using percentage values. From the final paragraph of my answer:
If you want to position a background image whose size is 100% of the background area, you won't be able to use a percentage, since you can't move a tile that fits its frame perfectly (which incidentally would make for either the most boring puzzle or the perfect prank). This applies whether the intrinsic dimensions of the background image match the dimensions of the element, or you explicitly set background-size: 100%. So, to position the image, you will need to use use an absolute value instead (forgoing the sliding-puzzle analogy altogether).
The reason it works with background-size: 50% is because the image is now given space to move around. At the same time, the sliding puzzle analogy now falls flat because the percentage values you've set for background-position are greater than 100%...
Anyway, in your specific example, the absolute values are equal to your element's width and height properties respectively (note: not the actual image dimensions):
div {
background: url(image.png) no-repeat 250px 100px/100%;
height: 100px; /* half height of image */
width: 250px; /* half width of image */
}
Updated fiddle
If you cannot hardcode these values, e.g. if you need this effect to apply across elements of different sizes, then unfortunately you will not be able to use background-position to hide the image.
Related
Was testing different ways of fitting a background using CSS, and read some documentation that I did not 100% understand.
Currently I have the following:
body {
background: linear-gradient(-45deg,#ee7252,#a23d73,#2be6d5,#24d5ab);
background-size: 250% 250%;
}
My question is the following: What is the difference between
background-size: 250%;
and
background-size: 250% 250%;
You will notice that when you have background-size: 250% 250% the colors look lighter at the bottom right hand side than when you have just one 250%.
The background-size property takes one or two values. If it has two then the first specifies the size of the background in the x direction and the second the size in the y direction.
In your example the width at 250% means the background is 'stretched' to two and a half times the width of the element. And similarly with height.
If no height is specified then 'auto' is assumed and the background will get the height of the element - no 'stretching'.
Based on the documentation here, specifying just one value implicitly sets the height to auto. Specifying two values (one for width, one for height) explicitly doesn't.
in this page
http://demos.roxiwd.com/index.php/ar/kgar
How to show images normal like the next row
and how to show the words once the mouse hover any point on image not the word area.
img:hover .words {
display: block;
}
The biggest problem is that you have a dynamic column width and a fixed height on your image containers (with background-size set to 100% 100%). This results in deformed images. You say you want to change that on hover. To do so, you first need to reset the height of this container:
.uc_animated_border_banner:hover .uc_animated_border_bg {height: auto!important;}
Next you should use the padding trick to set the (now dynamic) height equal to the aspect ratio. The aspect ratio of the image is 450px/350px = 1.29. This equals to 129% padding-bottom. Correct this for the line-height of the element that actually takes up verticale space in the box (the h2, with a height of 30px) and you end up with 129% - 30px for the padding-bottom. Split this for equal padding top and bottom, and you end up with 64.5% - 15px padding on both top and bottom of the h2 element. This results in a box with an exact aspect ratio of 1.29 (as long as the h2 fits on a single line).
.uc_animated_border_banner:hover .uc_animated_border_banner .uc_content_box h2 {
padding-top: calc(64.5% - 15px)!important;
padding-bottom: calc(64.5% - 15px)!important;
}
TIP: Use position: absolute on the h2 for a solution without the 15px/30px and single-line constraint.
Although this works I would chose for a more simple solution. Find the inline CSS statement at line 214:
.uc_animated_border_bg {background-size: 100% 100%!important;}
... and replace it with:
.uc_animated_border_bg {background-size: cover!important;}
I think the result looks better and the solution is much simpler. This alternative solution works for any image (irrespective of their aspect ratio). The only down-side is that an unknown amount of the image is invisible/cut off.
I've got a Bootstrap page where some rows have background images. Is there a way (preferably css) to scale such a background image, so that it's always centered and fills the div 100%?
So I don't mean a fullscreen background image for the entire page (like this), it just needs to fill the div (typically a row in my bootstrap container).
I mean like so:
So no matter the display resolution and the actual screen size of the div, its background image should scale accordingly so it entirely fills the div. The image should not be stretched out of proportions, which means that part of the image will typically fall outside the div, either up/down or left/right (unless the div just so happens to have the exact same aspect ratio as the image).
Also the image should be centered, i.e. the middle of the background image should be in the middle of the div.
I've tried all sorts of things with background-size:100% auto or auto 100% which seems to work OK in one direction, but I can't seem to find a generic solution that works in all cases.
sure, you could apply the same idea to any element:
yourdiv {
background: url(images/bg.jpg) no-repeat center center fixed;
/* and one of these: */
background-size:contain;
background-size:cover;
}
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 am trying to add a div to my html with a box image in it. But I couldnt make the image to stretch to the div's size
here is what I have so far,
<div style="background:url('images/box.png') no-repeat center center fixed;width:600px;height:400px">
test
</div>
this displays a div with width 600px and height 400px but it displays half of the image. but I need to make the image to stretch.
thanks
use background-size: cover; or background-size: contain (choose the right property for your needs)
From MDN
cover
This keyword specifies that the background image should be scaled to be as small as possible while ensuring both its dimensions are greater than or equal to the corresponding dimensions of the background positioning area.
contain
This keyword specifies that the background image should be scaled to be as large as possible while ensuring both its dimensions are less than or equal to the corresponding dimensions of the background positioning area.
If you want the image to stretch, losing it's original aspect ratio, add background-size: 100% 100%;.
On the other hand, if you want the image to take up the entire div while maintaining image aspect ratio and some clipping is okay, use background-size: cover