How would I go about scaleing the image so it resizes?

HTML & CSS
1

Code:


<style>

html,body {
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  background-color: #000000;  
  background-image: url("https://i.imgur.com/DUY2xq9.png");
  background-repeat: no-repeat;
  background-position: center center;

}

.outer {
  display: table;
  height: 100%;
  margin: 0 auto;
}

.tcell {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

p {
  font-style: normal;
  font-size: 10vw;
  font-family: georgia;
  margin-top: 0;
  margin-bottom: 0;
  border: 1px solid blue;
  padding: 5px;
}


/* unvisited link */

a:link {
  color: blue;
  text-decoration: none;
  outline: 0;
}


/* visited link */

a:visited {
  color: blue;
  text-decoration: none;
  outline: 0;
}


/* mouse over link */

a:hover {
  color: blue;
  text-decoration: none;
  outline: 0;
}


/* selected link */

a:active {
  color: blue;
  text-decoration: none;
  outline: 0;
}
</style>


<div class='outer'>
  <div class='tcell'>

    <p><b><a href="https://www.google.com/" target="_blank">Enter</a></b></p>


  </div>
</div>
2

Try a “background-size” Google search

3

background-size: 686px 645px; doesn’t do anything, I forgot to mention that.

See:

Image still doesn’t scale.

4

Did you search and try the cover or contain option?

Did you try validating the script?

https://validator.w3.org


https://jigsaw.w3.org/css-validator/

5

686px converted to a percentage would be what?

6

A percentage requires two values:

7

so then, 686px would convert to what?

9

There was a web site @ronpat showed me that did conversions, but I forget what site that was.

10

Try searching this forum for the following:

@ronpat convert scale image

11

Try these:

  1. 100% auto
  2. auto 100%

Unfortunately I am using a tablet and cannot try them.

12

Found it:

1 Like
13

I forget how I do this.

14

To solve a percent problem, one needs to know the two (2) values that are being compared. So, the question is: 390px is being compared to what other width value to arrive at a percent. Until you know the two values being compared, you cannot calculate the third (It’s a division then multiplication problem.)

value A
-------  X 100 = percent value
value B
2 Likes
15

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