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.
Related
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'm trying to find out ways to keep images, type and other graphic elements that fill a browser window to maintain their proportion and relationships to one another while continuing to fill the window while that window is resized.
To see what I mean, please take a look at the following examples:
Example 1:
https://www.nytimes.com/2017/09/26/magazine/how-fake-news-turned-a-small-town-upside-down.html?rref=collection%2Fsectioncollection%2Fmagazine&action=click&contentCollection=magazine®ion=stream&module=stream_unit&version=latest&contentPlacement=1&pgtype=sectionfront
Example 2:
https://www.nytimes.com/2017/09/28/magazine/here-comes-the-closer-in-the-seventh-inning.html?rref=collection%2Fsectioncollection%2Fmagazine&action=click&contentCollection=magazine®ion=rank&module=package&version=highlights&contentPlacement=6&pgtype=sectionfront
Note how the photo in each, especially in Example 1, is not stretched or squeezed out of its natural shape. Also note how either the full width or the full height of the image is always shown no matter what size the browser window is. Further, the type (headline and intro copy) remains anchored to the bottom left and remains the same size.
How can I achieve this effect?
Additionally, I would like to know how to set the page up so that large image and the graphics that accompany it, change every few seconds.
I would prefer to do this is CSS, but also welcome HTML and other solutions.
Thanks.
I think you are looking for background-size: contain;
In contrast to background-size: cover; it does not ensure the background image covers the whole container, instead the background image gets resized so that the height AND the width are the same or smaller than the size of the container.
Example for contain:
textarea {
width: 100px;
height: 100px;
background-image: url('http://via.placeholder.com/100x100');
background-size: contain;
background-repeat: no-repeat;
}
<textarea></textarea>
Example for cover:
textarea {
width: 100px;
height: 100px;
background-image: url('http://via.placeholder.com/100x100');
background-size: cover;
background-repeat: no-repeat;
}
<textarea></textarea>
Sidenote: I intentionally used textareas for the examples, because they can easily be resized in the bottom right corner for testing
You will have to give width in % for this kind of effect. Don't specify the height and width for the image in pixels. You will have to use '%' for varying the image width ( with proportionate height ) with the screen size or browser size.
If you wish to provide height and width in pixels then you will have to use media queries in CSS to specify height and width for varying screen sizes.
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.
When i set the background-size property from an image of a div to background-size: cover; or background-size: 100%;, the both look the same.
What is the difference?
When should i use cover and when 100%?
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
Basically it zooms in until the inner most edges are touching the side, which means that some of the image may be cut off unlike 100% where all of the image will be visible.
If it did not do the zoom in, you would end up with two sides that reach the edge but on the other axis you would have blank horizontal (or vertical) looking 'bars' on either side of the image in one of those directions.
Your Question: Why would they looks the same ?
Answer: If the image / container are square
See http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover for example
here's a fiddle: http://jsfiddle.net/RS5kX/19/
background-size:100%; = background-size:100% auto; = the width is set to be 100% large and the height of the background image follows respecting the image aspect ratio.
background-size:cover; means the background image will always fit the whole div , you won't be left with any empty spots in your div
background-size:100% 100%
won't leave any empty space too, but of course this will detroy the original image aspect ratio
Pretty sure background-size: cover; means the image will fill the element while maintaining its aspect ratio, while background-size: 100%; will just make the image fill 100% width of the element.
I need to re-size a given area of a sprite. My original image is 800px by 200px. I set background-position: 200px 0px; and width: 100px; height: 25px; This gives me the correct part of the sprite, but I am wondering if it is possible to re-size this portion of the sprite to say 200px by 50px. But background-size: 200px 50px; resizes the whole sprite to this size, not just the area I am interested in.
Thanks!
I am trying to be general, so there is no fiddle.
You can try using percentages to scale the image proportionately. For example, to double that portion to 200px by 50px, use:
background-size: 200% 200%;
This resizes the background to 200% of the width and height of its container respectively. You may need to adjust the background-position value to accommodate this method of scaling, depending on your layout or use case.
Be aware that background-size isn't really designed for use with sprites, so this may or may not achieve the result you're looking for.
No, you can't scale a portion of an image using CSS. I tested background-size by percentage and was surprised to find that the scaling on Chrome is not 1:1.
background-size: 50% doubled the background image. With 200% it seemed to scale exponentially.
http://jsfiddle.net/qFCk3/