1

please, what can I do to change the source from images in a button? I actually receive them from an external website where I have access to an API, but I have saved them on my WordPress and would like to use them with the commands "img src" & "alt", but when I am trying (on the example, with american football) I am not getting any image for the element and it doesn't show a button like the rest.

<style>

.header {
  text-align: center;
  background: #E1AFB3;
  color: #C3414D;
  font-size: 20px;
  font-family: Montserrat;
}

.btn {
  border: none;
  font-size: 14px;
  cursor: pointer;
  display: inline-block;
  width: 100%;
  min-height: 150px;
  margin: 0px -2px;
  color: #EFEEEE;
  background-size: cover;
}

.btn:hover {
  background: #E1AFB3;
  color: #C3414D;
}


@media only screen and (min-width: 600px) {
.btn {
    width: 50%;
  }
}

/* Basketball */
.basketball {
  background-image: url(https://www.thesportsdb.com/images/media/league/fanart/lbk7tj1576753722.jpg);
  background-size: cover;
  color: #EFEEEE;
}

.basketball:hover {
  background: #E1AFB3;
  color: #C3414D;
}

/* Baseball */
.baseball {
  background-image: url(https://www.thesportsdb.com/images/media/league/fanart/ewfwzm1521039743.jpg);
  background-size: cover;
  color: #EFEEEE;
}

.baseball:hover {
  background: #E1AFB3;
  color: #C3414D;
}

/* Ice Hockey */
.icehockey {
  background-image: url(https://www.thesportsdb.com/images/media/league/fanart/typuvs1421795648.jpg);
  background-size: cover;
  color: #EFEEEE;
}

.icehockey:hover {
  background: #E1AFB3;
  color: #C3414D;
}

/* Association Football */
.associationfootball {
  background-image: url(https://www.thesportsdb.com/images/media/league/fanart/yuwxqr1422265356.jpg);
  background-size: cover;
  color: #EFEEEE;
}

.associationfootball:hover {
  background: #E1AFB3;
  color: #C3414D;
}

/* Tennis */
.tennis {
  background-image: url(https://www.thesportsdb.com/images/media/league/fanart/rklwf21487677095.jpg);
  background-size: cover;
  color: #EFEEEE;
}

.tennis:hover {
  background: #E1AFB3;
  color: #C3414D;
}

/* Racing */
.racing {
  background-image: url(https://www.thesportsdb.com/images/media/league/fanart/ztpfz31599901449.jpg);
  background-size: cover;
  color: #EFEEEE;
}

.racing:hover {
  background: #E1AFB3;
  color: #C3414D;
}

/* Fighting */
.fighting {
  background-image: url(https://www.thesportsdb.com/images/media/league/fanart/f6jyk21570522164.jpg);
  background-size: cover;
  color: #EFEEEE;
}

.fighting:hover {
  background: #E1AFB3;
  color: #C3414D;
}

/* Golf */
.golf {
  background-image: url(https://www.thesportsdb.com/images/media/league/fanart/3s07o31551783426.jpg);
  background-size: cover;
  color: #EFEEEE;
}

.golf:hover {
  background: #E1AFB3;
  color: #C3414D;
}

</style>
<div class="header">
  <h2><strong>SPORTS</strong></h2>
</div>

<center>
<a href="www.google.com"> <img src="vxznfu1625496417.jpg
" alt="American Football"><button class="btn">AMERICAN FOOTBALL</button></a> 
<a href=""> <button class="btn basketball">BASKETBALL</button></a> 
<a href=""> <button class="btn baseball">BASEBALL</button></a> 
<a href=""> <button class="btn icehockey">ICE HOCKEY</button></a> 
<a href=""> <button class="btn associationfootball">ASSOCIATION FOOTBALL</button></a>
<a href=""> <button class="btn tennis">TENNIS</button></a> 
<a href=""> <button class="btn racing">RACING</button></a> 
<a href=""> <button class="btn fighting">FIGHTING</button></a> 
<a href=""> <button class="btn golf">GOLF</button></a> 
</center>

Is this possible to change the image coming from " background-image: url(https://www.thesportsdb.com/images/media/league/fanart/lbk7tj1576753722.jpg); " to "imgsrc+alt"

Thank you very much for your time!

enter image description here

Alberto
  • 37
  • 6
  • 1
    Has nothing to do with the question but look into creating valid, semantic correct HTML. Having a ` – cloned Oct 06 '22 at 14:38
  • Thank you for the answer cloned. Oh sorry I am very new at this and still don't know about HTML semantic. Sorry if the question is very dumb but I am trying to create a link in the button to a new page, how can I do that without an a href? – Alberto Oct 11 '22 at 10:17
  • You don't create a link in a button. If it is a link, you create a link. If it is a button, you create a button. So if you want to link to another page, you use ` ` You can style a button to look like a link and the other way round. There is no difference in that regard between these two. – cloned Oct 11 '22 at 11:38
  • Thank you cloned will definitely have to check some tutorials into this, appreciatte the time you take to reply – Alberto Oct 11 '22 at 18:29

1 Answers1

1

So for what I understood, you want to use saved images, stored on your computer, with your buttons.

What you could do is:

Make a folder called "img" in your files, place your image in that map and link it with HTML (down here)

<button class="btn football"><img src="/img/name.jpg" alt="American Football"> FOOTBALL </button>

And then its up to you to fix your CSS the way how you wanted your images to be placed on your website.

Correct me if I misunderstood your question.

JulianDotExe
  • 113
  • 1
  • 8