How do you find the background-size percentage of an image?

HTML & CSS
1

260w x 168h = background-size: What %

What math equation do you do that gives you the percentage %?

2

You speak in riddles :slight_smile:

If an image is 260px wide and its the background of an element that is 260px wide by 168 tall then 100% 100% = 260px 168px.

If the element is say 100px by 100px then background-size:100% 100% will squash the background image to be 100px x 100px.

I feel you may be talking about something else or some other set up? Perhaps you are talking about sprites and if so then you would need to explain what you are trying to do and what problem you hope to solve?

3 Likes
3

266px by 174px would be what?

This would be a percentage with a decimal?

And would would be the math equation to get you to that number?

107.5% ???

4

Hi there asasass,

perhaps, this playing around, will help…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #f9f9f9;
    font: normal 1em / 1.5em BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }
#test1, #test2, #test3 {
    width: 30vw;
/* this value is image ratio multiplied by container width - 174/266*30 */
    height: 19.624vw;
    margin: 1em auto;
    background-image: url( https://via.placeholder.com/266x174/000/fff );
    background-size: 100% auto;
 }
#test2 {
    background-size: 200% auto;
    background-position: center center;
 }
#test3 {
    background-size: 50% auto;
 }  
</style>

</head>
<body>
 
 <div id="test1"></div>
 <div id="test2"></div>
 <div id="test3"></div>

</body>
</html>

…but then again, probably not!! :biggrin:

coothead

1 Like
5

Your question does not make sense.

A percent value represents a comparison of two related numbers. What are you comparing???

You have given us the dimensions of an image. From that, one can calculate the aspect ratio of the image which could be expressed as a percent…
(168w / 260h) x 100 = 64.615%

Is that what you are seeking? It would be helpful if you would explain how you intend to use the percent value.

2 Likes
6

I believe that asasass is trying to work out the percentage of a single image that’s contained in an image sprite compared to the whole sprite that contains multiple images.

I have tried to answer that question in this thread.

3 Likes
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.