CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Kael
Kael

Reputation: 381

How to fix an overlapping image in CSS?

How do I fix if my image is overlapping a an area of my page? I have an image which should be a part of my navigation bar but what happen is that the image didn't show when I refreshed the page. I'm still learning css so please bear with me.

HTML

<nav class="navbar navbar-inverse">
    <div class="container">
        <div class="navbar-header">
            <!-- Button for smallest screens -->
            <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="navbar-brand" href="index.html">
            <img src="assets/images/logo.png" alt="Techro HTML5 template"></a>-->
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav pull-right">
                <li class="c1 active"><a href="index.php">Home</a></li>
                <li class="c1"><a href="profile.php">Profile</a></li>
                <li class="c1"><a href="games.php">Games</a></li>
                <li class="c1"><a href="#">Top Players</a></li>                     
                <li class="c1"><a href="about.php">About</a></li>                   
                <li class="c1 dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Settings <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a data-toggle="modal" data-target='#change'>Change Password</a></li>
                        <li><a href="../logout.php">Logout</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <!--/.nav-collapse -->
    </div>

    <!--MODAL-->
        <?php include("includes/changepass.php");?>
    <!--END MODAL-->

</nav>

<nav class="nav-top"></nav>

CSS

.navbar-inverse {
  background: #ff4e50;  
  margin: 0 auto; 
  border: none;
  z-index: -1;
}
.nav-top{
  background-image: url(../images/header-top.png);
  margin-bottom: 40px;
  padding-bottom: 20px;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 1;
}

What It looks now

enter image description here

The Image

enter image description here

My Plan

enter image description here

Upvotes: 2

Views: 3578

Answers (2)

David Wilkinson
David Wilkinson

Reputation: 5118

The background image isn't showing becase the nav-top div hasn't got a height or any content inside of it.

Please check this fiddle: https://jsfiddle.net/phq6q30n/

I've simply added a height to the div as follows:

.nav-top{
  background-image: url(https://i.sstatic.net/21g76.png);
  height: 200px;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 1;
}

I would experiment with the height property and see what works best for your project.

Upvotes: 2

RepeatQuotations
RepeatQuotations

Reputation: 724

By default the nav class="navbar" could have negative bottom margin as seen in https://getbootstrap.com/examples/navbar/

Try adding this css rule

.navbar {
  margin-bottom: 0px;
}

You might find the "Select an element on the page to inspect it" function in the developer console useful for css issues like this. It's located on the left top corner of the chrome console. Read more here: https://developers.google.com/web/tools/chrome-devtools/iterate/inspect-styles/basics?hl=en

Upvotes: 0

Related Questions