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/
Related
Yesterday I visited Artstation and I noticed a cool effect on the main background image at the top for each profile on Artstation. If you resize the window from desktop size to the left and make the window smaller, the image starts to resize and at approximately 1430 px inner size and end at approximately 1010 px inner size and after that it stops resize. The resizing is just like when you resize a common image, but this is a background image. This effect is nice for a responsive design.
I have tried to inspect the CSS, but I can't find the answer. Someone who can tell me how this is done?
This is a randomly selectedthe profile that I was looking at to show what I mean:
https://www.artstation.com/gaelleseguillon
When I try to use a background image I use this code:
.topContainerBackground
{
background-image: url(../imagesLayout/background.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: #000;
height: 600px;
width: 100%;
position: relative;
}
But as I wrote, I don't get the resize thing at approximately 1430 px inner size.
background-size: cover; is the key here. 1430px has no real significance, it's a function of the proportions of the background image.
When a window is really wide, cover background sizing is mostly responding to the vertical height of the container, stretching the image to match vertically.
Once you start shrinking the window, there comes a point where height is no longer the primary concern, width is. That is where the image seems to begin scaling horizontally.
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.
The effect works fine, but the image is zoomed in on. Any clue as to why?
#hero{
background-image:url(../images/metalWorx_hero.jpg);
width:1020px;
min-height:398px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Well, background-sizing: cover; is the reason why your background image seems "zoomed" as it is making the background image so big that it fully fits over its container. What happens on your case (feeling like its being zoomed in) is that the aspect ratio of the background isnt the same as the aspect ratio of the container. Instead of stretching the background image, background-sizing: cover will oversize the background so much until it covers everything up, leaving no gaps, but the "zooming" might happen.
Here is an illustration of the reason, as I know how bad my english :D
So you can see, the background image will be resized that it fits for the height, but because of the aspect ratio, both of the sides will go out of the container.
Edit #2 - Added some more informations and help
Depending on the real aspect ratios and sizes there are different solutions to it. The "quick and dirty solution" is to use background-size but instead of setting it to "cover", we will set its width and height to 100%. Code:
#hero{
background-image:url(../images/metalWorx_hero.jpg);
width:1020px;
min-height:398px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%; /* Set width and height to 100% */
}
Its a very simple "fix", but its obvious what can happen when the aspect ratio gets distorted:
Real and only way to fix it ;)
If you really want to fix it, you should make sure that your container and background image have about the same aspect ratio and then going back to background-size: cover; (just as in your first post)
I have got so far on the background of my new website and now i am stuck, the background image goes less than 100% height if you shrink the browser window.
I want it to stay full size and if you shrink it, I don't want the height to go any less than 100% (showing white)
Code here http://www.bestlincs.co.uk/new/
you can use below code:
html or .classname {
background: url(ImageUrlhere) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Use:
body {margin: 0; padding: 0}
and set the background-size property to cover: http://www.w3schools.com/cssref/css3_pr_background-size.asp
In your code you have not defined a height to the image give it a height 100% and it works i tried it in my browser and works fine
The solution depends on your needs - one way would be to specify a min-width and min-height attributes in css instead of pure width. As it will scale to whatever size it needs, then position it fixed to the top left corner (mind you, any "overflow" on the right will be cut off).
Source:
http://css-tricks.com/perfect-full-page-background-image/
A detailed explanation of your problem:
If you set an image to 100% width of its container and do not specify a height, it will always be stretched until it fills out the container, while the height is scaled to keep the image's aspect ratio.
E.g: Take an image that is 200px x 100px large, put it into a 300px wide container with it's width set to 100%. It will be scaled by a factor of 300/200 = 1.5 along both dimension, resulting in an image sized: 300px x 150px.
What will happen, if your image has a different aspect ratio than the user's screen? It will simply stretch to full width, then leave the rest blank. Setting a height as well would introduce even more problems, as your image would get distorted.
HTML:
body {
margin:0;
background: url(image.gif) no-repeat;
padding: 0;
}
Then the background size will be 100%
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.