There are two elements here. One is a transparent button, and the other is an image positioned behind it.
The background property didn't work for me, so I attempted different variations without success:
.top-container > button {
background-image: url(path-to-image); /* Also tried using image() */
background-repeat: no-repeat;
width: 100px;
height: 33px;
color: white;
border: none;
font-family: 'CapitalisTypOasis', 'CapitalisTypOasisMedium';
text-align: center;
z-index: 2;
position: absolute;
top: 1.7em;
padding: 0;
}
I tested various small changes with no luck, so I ended up placing an image behind the button which worked perfectly under my impending deadline.
.boutonsim {
display: block;
height: 33px;
width: 100px;
position: absolute;
top: 1.7em;
z-index: 1;
}
.top-container > button {
display: block;
width: 100px;
height: 33px;
background-repeat: no-repeat;
background-color: rgba(255, 255, 255, 0);
color: white;
border: none;
font-family: 'CapitalisTypOasis', 'CapitalisTypOasisMedium';
text-align: center;
z-index: 2;
position: absolute;
top: 1.7em;
padding: 0;
}
This is how the HTML looks:
<div class="top-container">
<img id="img2" src="images/haut.png" />
<img id="title" src="images/nom.png" />
<img id="logo" src="images/LOGO.png" />
<div class="boutonsim" style="right: 80px;"><img src="images/clipart/boutonORIGINAL.png" /></div>
<button style="right: 80px;">Culture</button>
</div>
The elements should be in the same location, but when viewed in Chrome, they are not aligned correctly. Any assistance would be appreciated. Thank you.
A GIF showing the result is available at this link if it helps:
<a href="https://gyazo.com/c849e62e7893453a2b442f2060bce1e4"><img src="https://i.gyazo.com/c849e62e7893453a2b442f2060bce1e4.gif" alt="Image from Gyazo" width="166"/></a>