How to make image scale without media css - html

Question

I have this image name plate (PAST CHAMPIONS) for the plague and it looks decent on all screens except for iPhone portrait, it seems to get cut off.
Anyway to make this scale without media css?
Here is home page.
http://www51.myfantasyleague.com/2017/home/61106#0
Original code still in css
#championship_plaque h2 {
background:
rgba(0, 0, 0, 0)
url( "http://dagrafixdesigns.com/Images/2008/DA_2017/DA_Pro16/plaquetitle_glass.png" )
no-repeat
scroll
center center
!important;
border: 0 none;
margin-left: 25px;
text-indent: -9999px;
}
Tried this code to no luck
#championship_plaque h2 {
background:
rgba(0, 0, 0, 0)
url( "http://dagrafixdesigns.com/Images/2008/DA_2017/DA_Pro16/plaquetitle_glass.png" )
no-repeat
scroll
center center
!important;
background-position: 70% 0;
background-repeat: no-repeat;
background-size: cover;
padding-bottom: 20px;
padding-top: 20px;
}
Desktop:
Mobile:
I guess I can use media call to switch to a new image for this size screen if all else fails, just want to see if it can be done this way first.
thx

Answer 1

In your second example you're duplicating property values by using the shorthand background property with !important but then overriding them immediately afterwards. I recommend using the longhand properties when you want to be very clear about what's going on.
What you want is background-size: contain - which automatically downscales the image so it's 100% visible in the parent container. You also want to remove the background-color: black:
This is the rule I've got that works for me:
#championship_plaque h2 {
background-image: url("http://dagrafixdesigns.com/Images/2008/DA_2017/DA_Pro16/plaquetitle_glass.png");
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
Note that if you want to hide text there's a better approach than text-indent: -9999px, instead consider using this combination:
user-select: none;
color: #00000000; /* hex RRGGBBAA, AA=00 means 0% opacity, so the text is invisible */