Harri Caceres Harri Caceres - 4 months ago 8
HTML Question

How do I place an image behind my navigation links?

I'm trying to place an image behind my navigation bar and I want it fixed on the top right side of the page but I'm having a hard time trying to do so.

Here's what I want the page to look like: http://i.imgur.com/dgEPl8l.png

This is my HTML:

<div class="navbarcn">
<div class="navbar">
<img src="bamboo.png">
<nav class="header">
<a class="active" href="javascript:;">HOME</a>
<a class="headl" href="menu.html">MENU</a>
<a class="headl" href="about.html">ABOUT</a>
</nav>
</div>




The CSS:

.navbarcn{
margin:0;
height:120px;
position:fixed;
width:100%;
}
.navbar{
float:right;
text-align:right;
width:100%;
height:200px;
}
.navbar img{
width:250px;
float:right;
}
.navbar a{
padding:10px;
text-decoration: none;
font-size:1.4em;
font-weight: bold;
}

Answer

First, you should not use an img for this kind of styling. Use CSS. (Here I have commented out the image).

<div class="navbarcn">
<div class="navbar">
    <!--  <img src="bamboo.png"> -->
    <nav class="header">
        <a class="active" href="javascript:;">HOME</a>
        <a class="headl" href="menu.html">MENU</a>
        <a class="headl" href="about.html">ABOUT</a>
    </nav>  
</div>

Next, add some background properties to target your navbar.

.navbarcn{
  margin:0;
  height:120px;
  position:fixed;
  width:100%;
}  

.navbar{
float:right;
text-align:right;
width:100%;
height:200px;

background-image: url(https://placekitten.com/100/50);
background-repeat: no-repeat;
background-position: top right;
}  

/* .navbar img{
width:250px;
float:right;}   */

.navbar a{
padding:10px;
text-decoration: none;
font-size:1.4em;
font-weight: bold;}

Fiddle: https://jsfiddle.net/Lf4exsv7/

Using IMG vs CSS background-image: When to use IMG vs. CSS background-image?