I am essentially trying to create an image with a play button in the bottom left corner, that will link to another page to play an audio file. However, I am having a couple issues. First and foremost, even though I specifically am using a play button with a transparent background, it gives it a white background which covers up the image it's on. I tried "background-color: transparent;" for the play button, but that didn't work. Additionally, I am not sure how to resize my play button. I've tried to change the width and height of the image via the "post" class and "post0001" id, but it doesn't seem to work. I apologize if this is too many questions for one post. My code is below. Thank you very much.
HTML:
<head>
<link rel = "stylesheet" href = "dontgoogleit.css">
<div class= logo>
DGI
<!-- <img src = -->
</div>
<title>
pls dnt
</title>
<div class="topnav" id="myTopnav">
<a href="#episodes" id="episodes">EPISODES</a>
<a href="#sources" id="sources">SOURCES</a>
<a href="#about" id ="about">ABOUT</a>
<a href="#contactus" id ="contact">CONTACT US</a>
</div>
</head>
<body>
<div class="post" id="post0001">
<img src="http://www.pngmart.com/files/3/Play-Button-Transparent-Background.png" alt= "Play Button" href="#episodeOne">
</div>
CSS:
* {
margin: 0;
padding: 0;
background-color: rgb(300, 300, 300);
}
.topnav {
padding-top: 50px;
/*padding-left: 200px;*/
position: relative;
letter-spacing: 2px;
float: left;
}
.topnav a {
font-size: 20px;
color: black;
text-decoration: none;
border-bottom-width: 5px;
border-bottom-style: solid;
margin-bottom: 35px;
margin-left: 80px;
}
#episodes {
border-bottom-color: rgb(219, 50, 54);
}
#sources {
border-bottom-color: rgb(72, 133, 237);
}
#about {
border-bottom-color: rgb(244, 194, 13);
/*padding-left: 15px;
padding-right: 15px;*/
}
#contact {
border-bottom-color: rgb(60, 186, 84);
}
.post {
position: fixed;
margin-top: auto;
width: auto;
top:120px;
}
#post0001 {
width: 500px;
height: 500px;
background-image: url(https://static.pexels.com/photos/298611/pexels-photo-298611.jpeg);
background-repeat: no-repeat;
padding-bottom: 200px;
padding-right: 350px;
padding-left: 15px;
padding-top: 45px;
}
.logo {
font-size: 80px;
color: black;
font-family: sans-serif;
float: left;
}
.post img
. Or you can set the width on.post
, then add.post img { max-width: 100%; }
so that the image resizes with.post
. You can also remove the background from the image by using.post img { background: transparent; }
– Michael Coker Mar 30 '17 at 0:24