1

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:

I want the page to look like this

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;
}
Ahmad Khan
  • 2,655
  • 19
  • 25
Harri Caceres
  • 79
  • 3
  • 8

5 Answers5

0

Give .navbarcn background image

.navbarcn{
margin:0;
height:120px;
position:fixed;
width:100%;
background-image:url('bamboo.png');
}
Friend
  • 506
  • 4
  • 10
0

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?

Community
  • 1
  • 1
ksav
  • 20,015
  • 6
  • 46
  • 66
0

.navnarcn's parent must explicitely have the css property position defined.

Eduardo Escobar
  • 3,301
  • 2
  • 18
  • 15
  • While this might be a valuable hint to solve the problem, an answer really needs a bit more detail than this. Please [edit] to provide example code to show what you mean. Alternatively, consider writing this as a comment instead. – Toby Speight Aug 02 '16 at 14:23
0

using background would be a better solution but this is also fine use absolute position for the image

.navbar{
    position:relative;
}
img{
    position: absolute;
    top:5px;
    right:5px;
    display block;
    z-index:-1;
}
Ahmad Khan
  • 2,655
  • 19
  • 25
owais
  • 4,752
  • 5
  • 31
  • 41
0

There are two solutions

Best way

.navbarcn{
  background: url('path to your image')
}

Alternative way

.navbar img{
  height: 35px
}
.navbarcn{
  margin-top: -35px
}
Syam Pillai
  • 4,967
  • 2
  • 26
  • 42