Button is not working when placed on background image for HTML?-CodePudding

I am having trouble with my button being clickable. The main goal I am trying to achieve is to make the button clickable with a background image and what's going on is the button isn't clickable right now.

If anyone can help it would greatly be appreciated! Thank you in advance!

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Macondo", cursive;
  font-size: 1.5rem;
}

.fas.fa-pause-circle {
  display: none;
}

#wrapper {
  background-image: url("../images/gundam.jpg");
  background-size: cover;
  background-position: center;
  background-blend-mode: overlay;
  min-height: 100vh;
  min-width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bgMusic {
  position: absolute;
  top: 64%;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.container .btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #555;
  color: white;
  font-size: 16px;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  background-image: url("https://images.unsplash.com/photo-1579546929518-9e396f3cc809?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjExMDk0fQ&w=1000&q=80");
}

.btn:hover {
  opacity: 1;
}

header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
  position: relative;
}

header::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background-color: rgba(34, 34, 34, 0.5);
}

header #content {
  position: relative;
  z-index: 1;
}

header #content h1 {
  font-size: 32px;
  color: #fff;
  font-weight: 900;
  text-align: center;
}

header #content h1 span {
  font-weight: 400;
  color: #FF0000;
}

@media screen and (min-width: 480px) {
  header #content h1 {
    font-size: 48px;
  }
}

@media screen and (min-width: 768px) {
  header #content h1 {
    font-size: 42px;
  }
}

@media screen and (min-width: 1024px) {
  header #content h1 {
    font-size: 56px;
  }
}

@media screen and (min-width: 1280px) {
  header #content h1 {
    font-size: 72px;
  }
}

header #content h2 {
  font-size: 32px;
  color: #FDFEFF;
  font-weight: 900;
  margin-bottom: 20px;
  text-align: center;
  position: absolute;
  top: 80%;
  left: 43%;
}

header #content #countdown {
  color: #FF0000;
  font-size: 36px;
  font-weight: 400;
}

@media screen and (min-width: 480px) {
  header #content #countdown {
    font-size: 42px;
  }
}

@media screen and (min-width: 768px) {
  header #content #countdown {
    font-size: 56px;
  }
}

@media screen and (min-width: 1024px) {
  header #content #countdown {
    font-size: 72px;
  }
}

@media screen and (min-width: 1280px) {
  header #content #countdown {
    font-size: 88px;
  }
}

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Dancing Script&family=Macondo&display=swap" rel="stylesheet" />
  <!-- <link href="css/main.css" rel="stylesheet" type="text/css" /> -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" integrity="sha384-Bfad6CLCknfcloXFOyFnlgtENryhrpZCe29RTifKEixXQZ38WheV i/6YWSzkz3V" crossorigin="anonymous" />
  <!-- <link href="/css/all.min.css " rel="stylesheet" type="text/css" /> -->

  <title>Mobile Suit Gundam</title>
</head>

<body>
  </div>
  <header>
    <div id="content">
      <div id="wrapper">
        <h1>Mobile<span>Suit</span>Gundam</h1>
        <h2>Coming Soon!</h2>
      </div>
      <div >
        <audio src="music/music.mp3" loop=""></audio>
        <button >
              <i ></i>
              <i ></i>
            </button>
      </div>
  </header>
  </div>
  <!-- <script src="js/main.js"></script> -->
  <script type="text/javascript">
    $(document).ready(function() {
      $(".btn .fa-play-circle").click(function() {
        $(".bgMusic audio").trigger('play');
        $(".btn .fa-play-circle").hide();
        $(".btn .fa-pause-circle").show();
      });
    });
  </script>
</body>

CodePudding user response：

You don't have a background image. You have an overlay mask as a pseudo-element which blocks access to everything underneath. If you want to keep that layout you can add pointer-events: none to it to let clicks pass through, as I've done here.

Note that I've fixed up your HTML, which had a faulty opening div tag and a missing closing div tag. A good editor will make that kind of mistake apparent so you can fix them.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Macondo", cursive;
  font-size: 1.5rem;
}

.fas.fa-pause-circle {
  display: none;
}

#wrapper {
  background-image: url("../images/gundam.jpg");
  background-size: cover;
  background-position: center;
  background-blend-mode: overlay;
  min-height: 100vh;
  min-width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bgMusic {
  position: absolute;
  top: 64%;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.container .btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #555;
  color: white;
  font-size: 16px;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  background-image: url("https://images.unsplash.com/photo-1579546929518-9e396f3cc809?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjExMDk0fQ&w=1000&q=80");
}

.btn:hover {
  opacity: 1;
}

header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
  position: relative;
}

header::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background-color: rgba(34, 34, 34, 0.5);
  pointer-events: none; /* <--------------------- I'm your huckleberry */
}

header #content {
  position: relative;
  z-index: 1;
}

header #content h1 {
  font-size: 32px;
  color: #fff;
  font-weight: 900;
  text-align: center;
}

header #content h1 span {
  font-weight: 400;
  color: #FF0000;
}

@media screen and (min-width: 480px) {
  header #content h1 {
    font-size: 48px;
  }
}

@media screen and (min-width: 768px) {
  header #content h1 {
    font-size: 42px;
  }
}

@media screen and (min-width: 1024px) {
  header #content h1 {
    font-size: 56px;
  }
}

@media screen and (min-width: 1280px) {
  header #content h1 {
    font-size: 72px;
  }
}

header #content h2 {
  font-size: 32px;
  color: #FDFEFF;
  font-weight: 900;
  margin-bottom: 20px;
  text-align: center;
  position: absolute;
  top: 80%;
  left: 43%;
}

header #content #countdown {
  color: #FF0000;
  font-size: 36px;
  font-weight: 400;
}

@media screen and (min-width: 480px) {
  header #content #countdown {
    font-size: 42px;
  }
}

@media screen and (min-width: 768px) {
  header #content #countdown {
    font-size: 56px;
  }
}

@media screen and (min-width: 1024px) {
  header #content #countdown {
    font-size: 72px;
  }
}

@media screen and (min-width: 1280px) {
  header #content #countdown {
    font-size: 88px;
  }
}

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Dancing Script&family=Macondo&display=swap" rel="stylesheet" />
  <!-- <link href="css/main.css" rel="stylesheet" type="text/css" /> -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" integrity="sha384-Bfad6CLCknfcloXFOyFnlgtENryhrpZCe29RTifKEixXQZ38WheV i/6YWSzkz3V" crossorigin="anonymous" />
  <!-- <link href="/css/all.min.css " rel="stylesheet" type="text/css" /> -->

  <title>Mobile Suit Gundam</title>
</head>

<body>
  <div>
    <header>
      <div id="content">
        <div id="wrapper">
          <h1>Mobile<span>Suit</span>Gundam</h1>
          <h2>Coming Soon!</h2>
        </div>
        <div >
          <audio src="music/music.mp3" loop=""></audio>
          <button >
            <i ></i>
            <i ></i>
          </button>
        </div>
      </div>
    </header>
  </div>
</body>

CodePudding user response：

You need to import Jquery. You can do it by adding this line inside the head section.

<script src="https://code.jquery.com/jquery-3.6.1.slim.min.js" integrity="sha256-w8CvhFs7iHNVUtnSP0YKEg00p9Ih13rlL9zGqvLdePA=" crossorigin="anonymous"></script>

Jquery official site: https://releases.jquery.com/

CodePudding user response：

You are adding listener on your icon instead of button.

$(".btn .fa-play-circle").click

Try using this

$(".btn").click