You can see here that the right and bottom are showing through to the other side.
How do you prevent that from happening when zoomed?
Right now there’s 10px around and between the image.
That doesn’t seem to be making a difference.
The space around and between it.
I tried using background-size: cover, but that didn’t work.
I think what’s being done here would be making it responsive.
An easy solution would be to make the image a couple of px bigger than the space it needs to fill and then any rounding errors won’t show through.
You can test this by reducing the jacket size and testing zoom etc.
.jacketb {
height: 172px;
width: 264px;
}
What’s the point of adding space between images if it doesn’t do anything?
That space is visible whether there is or isn’t an offset.
If you didn’t have a space then instead of white showing it would show the start of the next sprite which would be worse.
Just make the image a little bigger to start with as I suggested above.
How does zoom work in browsers.
Does zoom work only if there is text on the page.
or do the pages load into zoom regardless of whether there is or isn’t text on the page?
It makes things bigger or smaller.
Why don’t you test and see and then tell us your results. I would assume that whatever is on the page will get zoomed assuming as I mentioned before a user hasn’t set text only to zoom as per my own settings.
I don’t mess with font settings in the browser, I leave them as they are.
That’s fine but that doesn’t mean everyone else will.
You can’t use cover on a sprite because that refers to the whole image and not just the little piece you want.
I think you are talking about how to make the one sprite as a percentage of the whole sprite?
If we take this image for example.
Then the top image percentage would be 286 / 260 and 372 / 168 which would equal background-size: 110% 2221.43% (approx).
You could use that in this demo.
However in order to stop the white gap when zooming in Firefox you would need to over-size a bit and I would do it like this:
.jacketb,
.wrape {
background: url("https://i.imgur.com/tCYb8YF.jpg") no-repeat -11px -11px;
background-size:111% 223%;
}
That works for me at all zoom levels.
However it would have been easier to simply reduce the element size by a couple of pixels or have the image size oversized by a couple of pixels as already mentioned.
What math equations do you do to get those percentages?
I showed you in the post
The whole sprite is 286px x 372px
The image at the top of the sprite is 260px x 168px.
The rest is maths.
i.e. divide the whole width by the smaller width to find out what percentage it is of the whole width. (then do the same for the height).
286 / 260 = 110%
372 / 168 = 221.43%
286 is the width of the 1st image plus white space.
260 doesn’t seem to be the height.
What does 260 represent?
The width of the actual image.
With width you include the white space in.
260 represents the actual width of the image.
286 full width gets divided by the actual width 260.
Yes and no .
286px is the width of the whole image.
260px is the width of the individual sprite at the top of that big image. (The coloured background of the sea image). It does not include white space.
Yes 286 divided by 260 = 110%
What if the full width and actual with are both 266, how would you calculate that?
What percentage would you get?
100%
260 divided by 260 = 100%
Thank your for your help on how to do this.
Now I understand.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.