CODEWITHSUNDEEP
htmlcssbackground
NOW_Antonio
NOW_Antonio

Reputation: 87

Can't change the button background image

Actually I'm working on this element http://zag-test.nowcommu.myhostpoint.ch/

What I need is to add a background image into the "Click" button. I'm trying but I can't see results. This is the HTML and then the CSS

.cn-button {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 11;
    margin-top: -2.25em;
    margin-left: -3.78em;
    padding-top: 0em;
    width: 7.5em;
    height: 7.5em;
    border: none;
    border-radius: 50%;
    color: #f9d70a;
    text-align: center;
    font-weight: 700;
    font-size: 1.3em;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-backface-visibility: hidden;
    background-image:url('/css/clock.jpg');
}
<div class="component">
    <!-- Start Nav Structure -->
    <button class="cn-button" id="cn-button">Click</button>
    <div class="cn-wrapper" id="cn-wrapper">
        <ul>
            <li><a href="#"><span>07.45 Uhr</span></a></li>
            <li><a href="#"><span>07.55 Uhr</span></a></li>
            <li><a href="#"><span>08.15 Uhr</span></a></li>
            <li><a href="#"><span>08.17 Uhr</span></a></li>
            <li><a href="#"><span>10.47 Uhr</span></a></li>
            <li><a href="#"><span>13.20Uhr</span></a></li>
            <li><a href="#"><span>16.30 Uhr</span></a></li>
         </ul>
    </div>
    <!-- End of Nav Structure -->
</div>

Upvotes: 1

Views: 947

Answers (2)

Mahesh Prajapati
Mahesh Prajapati

Reputation: 672

Try this css property.

background-size: 100%;

Upvotes: -1

FalcoB
FalcoB

Reputation: 1333

your background image is actually visible... its simply way to huge...

simply add background-size: 100%; and you should see it :)

Upvotes: 3

Related Questions