CODEWITHSUNDEEP
htmltwitter-bootstrapcss
Nevershow2016
Nevershow2016

Reputation: 570

Bootstrap image not responsive

I am adding a logo using bootstrap etc and a background image. I'm not sure if I am doing this right but when I resize the window the nav bar it self is getting smaller but the image in the navbar is not. Anyone know why?

HTML: 

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <div class="logo">
        <img src="Image/Logo.png"/>
      </div>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#">Home</a></li>       
        <li><a href="#about">About</a></li>
        <li><a href="#about">Login</a></li>
        <li><a href="#about">Become A member</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</div>

CSS: 

body { 
    background: url('../Image/BackgroundImage.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.navbar-default {
    background-color: rgba(0, 0, 0, 0.65);
    border-top: 0px solid rgba(0, 0, 0, 0.5);
    border-bottom: 0px solid rgba(0, 0, 0, 0.5);
    margin-top: 60px;
    height: 80px;
}

.navbar-default .navbar-nav > li > a {
    color: #FFFFFF;
    font: normal normal normal 12px/1.3em 'Open Sans',sans-serif;
    text-transform: uppercase;
     padding:28px;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus{
    color: #ffcb80;
    background-color: transparent;
}

.navbar-default .navbar-nav > li > a:hover, 
.navbar-default .navbar-nav > li > a:focus {
    color: #ffcb80;
    background-color: transparent;
}

.logo {
    margin-left: 4em;
}

So its my logo div which is not re-sizing at the moment. Also I have a question about my background image, usually they don't need to resize? Mine just cuts out and you only see bits of it, is that good etc? or bad coding?

Upvotes: 1

Views: 772

Answers (1)

tohood87
tohood87

Reputation: 728

To make images responsive within the Bootstrap Framework you need to add a class to the image tag:

  • class="img-responsive"

See bootstraps documentation for further details here:

Example:

<img src="Image/Logo.png" class="img-responsive" />

Upvotes: 1

Related Questions