Search code examples
htmlcsspositionz-index

Add button to CSS image?

I'm trying to add a button on top of a background image in the landing page of the website. I tried using position tag in CSS and it didn't work. Then I tried adding z-index and that didn't work too.

I'm open to any more suggestions. Thank you.

Solution

  • I don't know what you mean by putting a button on a background image, but this is what I would do.

    <body>
    <header>
        <h1 class="title">text here</h1>
        <a class="button" href="#">button</a>
    </header>
</body>

    body{
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}

header{
    background-image: url(image.png);
    background-size: cover;
    text-align: center;
    height: 30vh;
    margin-top: 0;
}

.title{
    font-size: 10vh;
    color: orange;
    margin: 0;
    margin-bottom: 5rem;
}

.button{
    background-color: #6495ED;
    padding: 1rem 3rem 1rem 3rem;
    border-radius: 10px;
    color: #fff;
    text-decoration: none;
}