CODEWITHSUNDEEP
htmlcssnav
Bobby Mw
Bobby Mw

Reputation: 41

Overlaying Nav bar on background image

I'm building a website in a strange way,

The designer for the site has created a background image with the title and buttons for the nav bar built INTO the image, and would like me to make them clickable using HTML.

This isn't actually a problem when I can build it for a specific resolution, as below. Nav bar overlaying an image

However, when the resolution of the website changes, the position of the nav bar shifts to a different area, making it useless.

nav bar position changes, making it useless

I need a way to make my nav bar align and scale itself to the background image.

HTML:

<!DOCTYPE html>
<head>
    <title>
        Patrick Walsh 3D
    </title>
    <link rel="stylesheet" type="text/css" href="theme.css">
</head>
<body>
    <div id="nav">
        <a href="index.html">
            <div id="homeButton">
                <!--This is an empty div, used to define a portion of the screen that is clickable-->
            </div>
        </a>
        <a href="resume.html">
            <div id="resumeButton">
                <!--This is an empty div, used to define a portion of the screen that is clickable-->
            </div>
        </a>
        <a href="tutorial.html">
            <div id="tutorialButton">
                <!--This is an empty div, used to define a portion of the screen that is clickable-->
            </div>
        </a>
        <a href="contact.html">
            <div id="contactButton">
                <!--This is an empty div, used to define a portion of the screen that is clickable-->
            </div>
        </a>
    </div>
</body>

CSS:

<style>

#buffer{}


body{
    background-image:url(Background.png);
    background-size: cover;
    background-repeat: no-repeat;
}

#nav{
    background-color:white;
    opacity:.5;
    width:58%;
    height:50px;
    position:absolute;
    top:25%;
    left:21%;
}

#nav a{
    clear:left;
    float:left;
}

/*Divs that overlay buttons on background image*/
#homeButton{
    background-color:green;
    width:13%;
    height:80%;
    position: absolute;
    left:1%;
    top:2px;
}

#resumeButton{
    background-color:red;
    width:16%;
    height:80%;
    position: absolute;
    left:26%;
    top:2px;
}

#tutorialButton{
    background-color:blue;
    width:17%;
    height:80%;
    position: absolute;
    left:52%;
    top:2px;
}

#contactButton{
    background-color:orange;
    width:17%;
    height:80%;
    position: absolute;
    left:78%;
    top:2px;
}

</style>

Upvotes: 4

Views: 4447

Answers (2)

Amit
Amit

Reputation: 87

Have you tried putting the position of the bar to fixed or a pixel position that that is fixed ops from the top.

Upvotes: 1

Alex Hong
Alex Hong

Reputation: 95

Don't know if this might help put Maybe instead of having the image as an background.. You can use the tag?? This will create a clickable mapped image. http://www.image-maps.com/ http://www.w3schools.com/tags/tag_map.asp

Upvotes: 1

Related Questions