I want to place an image above my nav bar and then a background image behind the nav bar as well.
My current html for the image above nav bar:
<div class="viewport-1"></div>
My current CSS for the image above nav bar:
.viewport-1
{
background-size: cover;
background-image: url('saultitle.png');
height: 100vh;
}
The image is linked in the CSS sheet as it show whenever I hover over the link in Brackets and there is a gap in the webpage where the image should be - however it does not show.
As for the nav bar image there is no gap as it is a background image but it is also linked in the CSS sheet.
Nav bar HTML
<div id="nav">
<table class="nav">
<tr>
<td><a href="#getting-his-start">Getting his Start</a></td>
<td><a href="#cinematic-revolution">Cinematic Revolution</a></td>
<td><a href="#experimental-phase">The Experimental Phase</a></td>
<td><a href="#logos-made-to-last">Logos Made to Last</a></td>
<td><a href="#the-nect-big-thing">The Next Big Thing</a></td>
<td><a href="#his-influence-today">His Influence Today</a></td>
</tr>
</table>
</div>
Nav bar CSS
.nav {
background-image: url('goldenarm.png');
width:100%;
padding:1em 0;
Any advice as to why they don't show?
you can use:
#nav {
position: relative;
overflow: hidden;
}
.viewport-1 {
background-size: cover;
background-image: url('saultitle.png');
height: 100%;
background-color: #333;
width: 100%;
top: 0;
position: absolute;
transition: all ease-in-out 0.5s;
}
https://jsfiddle.net/nnwn7jbg/1
#nav:hover .viewport-1 {transform: translate(00%,-100%);;}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments