Background image wont go behind navigation

HTML & CSS
1

Hi all,

Im new to the forums and just looking for some advice,

Im in the process of learning bootstrap and developing my first website by im having a really annoying issue trying to get a background color or image display behind my transparent navigation.

This is my html code so far

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>website</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href='https://fonts.googleapis.com/css?family=Indie+Flower|Handlee' rel='stylesheet' type='text/css'>
    <link href="css/style.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    
      <nav class="navbar navbar-default" role="navigation">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#featured"><img id="main-logo" src="img/logo.svg"/></a>
          </div><!-- end of navbar-header -->
          <div class="collapse navbar-collapse" id="collapse">
            <ul class="nav navbar-nav navbar-right">
              <li class="active"><a href="#about-me">About Me</a></li>
              <li><a href="#my-work">My Work</a></li>
              <li><a href="#contact-me">Contact Me</a></li>
            </ul>        
          </div><!-- end of collapse navbar-collapse -->
        </div><!-- end of container -->
        <div class="clearfix"></div>
      </nav><!-- end of navigation -->
      
      <div class="top-section">
        <div class="about">
          <h1>hello everyone</h1>
        </div>
      </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

This is my current css stylesheet

body {
  position: relative;
}

/*--Navigation--*/

.navbar-default {
  background-color: transparent;
  border: none;
}

.nav li a {
  margin-top: 30px;
}

#main-logo {
  float: left;
}

/*--Top Section--*/

.top-section {
  background-color: #7ecaeb;
  margin-top: 80px;
  position: relative;
  background-position: center;
  background-size: cover;
}

.name {
  text-align: center;
  float: none;
}

#name-text {
  width: 300px;
  height: auto;
}

What i really want to try and do is just have the background on the class .top-section (either color or picture depending on what i go for) go behind the nav.

Im sure im just being a bit stupid here but i cant for the life of me see what im doing wrong, im still learning this so its quite new to me.

Thanks everyone

2

To paste a block of code, type three backticks ( ` ) on a line of their own to mark the beginning of the block, and another three on a line to mark the end.

`Some code.`
3

Thank you very much mate seems to be working fine now :slight_smile:

I have added a link showing my picture background that i would like to flow behind the navigation so that the nav sits on top of it. The nav has a transparent background already set as well.

i did strip this image out of the code above just to note

im just looking for it to look like the below site
http://sprightlyinnovations.com/

Thanks all

4

It should work, just adding background-image: url() to the element selector.

5

Hi sam, thanks for the reply. I tried adding the above to the .top-section class but it still only bumps up to the bottom of the navigation and doesnt flow behind it.

I inspected the code on the site linked above showing the nav on top of the background jumbotron element and i couldnt see much difference to what i have done. Im tempted to just create a wrapper after the opening body tag and put the nav and the other section in that but still wish it would work the way im trying

Thanks again

6

If you want the background to cover the whole page apply it to the body or other base level container.
Applying it to one element will only cover that one element.

7

Ok mate thanks, i just want it to cover the nav and the section after not the whole body as such.
I think i must be doing something wrong somewhere though. This the the code from a site i mention above.

 <body>


<!-- NAVBAR
================================================== -->

    <!-- Fixed navbar -->
    <div class="navbar navbar-default  navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="logo" href="index.html"><img src="img/sprightly_logo.png" alt="Sprigtly Logo"></a>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li><a href="#.design">Portfolio</a></li>
            <li><a href="#.research">Research</a></li>
            <li><a href="#.books">Books</a></li>
            <li><a href="#.thoughts">Thoughts</a></li>
            <li><a href="#.aboutme">About</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>

<!-- HERO
================================================== -->

    <!-- Main jumbotron for a primary marketing message or call to action -->
    <div class="jumbotron">
      <div class="hero">
      	<div class="container">
        	<h1>Handcrafted Innovation</h1>
        	<p>Hi! I'm Serina Patterson, a Medievalist and UX/web designer</p>
		<br>
        	<!--<p><a class="btn btn-primary btn-lg" href="#portfolio">Discover &raquo;</a></p>-->
      	</div>
	</div>
    </div>

The css has a background image on the div class jumbotron which as you can see is after the nav. This image flows the width and length of the jumbotron and flows behind the nav that sits on top of the background image as well which is what i am trying to achieve.

Pulling my hair out :-)
8

Then you want a common container to wrap around just the bits that want the background and apply the background to that.

1 Like
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.