CODEWITHSUNDEEP
htmlcss
user7186987
user7186987

Reputation:

How can I make my background image 'img-responsive'?

I was wondering how can I make my background image using bootstrap 'img-responsive'? The background image is with in herodiv 

<!DOCTYPE html>
<html>

<head>
  <html lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Liam Docherty Digital Portfolio</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/style.css">

  <style>
    body {
      margin: 0;
      padding: 0;
    }
    
    .navbar.navbar-default {
      background-color: #4D5061;
      height: 10vh;
      z-index: 100;
    }
    
    .navbar.navbar-default ul {
      list-style-type: none;
      text-align: right;
    }
    
    .navbar.navbar-default ul li {
      display: inline-block;
    }
    
    .dropdown-menu li {
      text-align: center
    }
    
    .dropdown .dropdown-menu {
      background-color: #4D5061;
    }
    
    .dropdown .dropdown-menu a {
      color: white;
    }
    
    .navbar.navbar-default ul li a {
      display: inline-block;
      padding: 3.5vh 8px 4px;
      color: white;
      text-decoration: none;
      font-size: 14pt;
      font-family: 'Roboto', sans-serif;
    }
    
    .navbar.navbar-default ul li:after {
      content: '';
      position: absolute;
      right: 50%;
      bottom: 0;
      left: 50%;
      height: 3px;
      background-color: #FFFFFF;
      border-radius: 9px;
      transition: all .2s;
    }
    
    .navbar.navbar-default ul li a:hover {
      color: white;
    }
    
    .nav.navbar-nav,
    .nav.navbar-nav>li {
      float: none;
    }
    
    .navbar.navbar-default ul li:hover:after {
      right: 0;
      left: 0;
    }
    
    .nav-title {
      font-size: 14pt;
      margin: 0;
      top: 35px;
      left: 50px;
      width: 100%;
      position: absolute;
      text-align: center;
      color: white;
      font-family: 'Roboto', sans-serif;
    }
    
    .navbar.navbar-default ul.dropdown-menu li,
    .navbar.navbar-default ul.dropdown-menu li a {
      position: relative;
      display: block;
    }
    
    #logo {
      padding-top: 2vh;
      padding-left: 20px;
      float: left;
    }
    
    .hero {
      background-image: url("https://static.pexels.com/photos/48727/pexels-photo-48727.jpeg");
      background-attachment: fixed;
      position: relative;
      text-align: center;
      width: 100%;
      max-width: 100%;
      width: 100vw;
      height: 100%;
    }
    
    section {
      position: relative;
      height: 95vh;
    }
    
    .section1 {
      height: 100vh;
      text-align: center;
      color: white;
    }
    
    .section2 {
      background-color: #11B5E4;
      text-align: center;
      color: white;
    }
    
    .section3 {
      background-color: #FFFFFF;
      text-align: center;
      color: white;
    }
    
    .fa-angle-down {
      color: #4D5061;
      position: absolute;
      bottom: 0px;
    }
    
    .fa-angle-up {
      color: #4D5061;
      position: absolute;
      bottom: 0px;
    }
    
    .footer {
      height: 6vh;
      background-color: #4D5061;
      padding: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
    
    .footertext {
      font-size: 14pt;
      color: white;
      font-family: 'Roboto', sans-serif;
      text-align: center;
    }
    
    .profile.box {
      bottom: 0;
      height: 50%;
      left: 0;
      margin: auto;
      position: absolute;
      right: 0;
      top: 0;
      width: 50%;
    }
    
    .shape {
      border-radius: 25px;
      background: #4D5061;
      content: url(http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg);
      color: white;
      height: 250px;
      margin: auto;
      padding: 3px;
      width: 250px;
    }
    
    .shape2 {
      background: linear-gradient(35deg, #4D5061, #4D5061);
      border-radius: 85px;
      color: white;
      height: 40px;
      margin: 1% auto;
      opacity: 0.9;
      padding: 0px;
      width: 250px;
    }
  </style>

</head>

<body>
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <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="#"><img src="http://placehold.it/60x60" alt="Your Brand Name"></a>
        <h1 class="nav-title">Liam Docherty's Digital Portfolio</h1>
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li><a href="#">Home</a>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">About Me <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a>
              </li>
              <li><a href="#section3">Contact</a>
              </li>
              <li><a href="#">Something else here</a>
              </li>
              <li><a href="#">Separated link</a>
              </li>
              <li><a href="#">One more separated link</a>
              </li>
            </ul>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Units <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a>
              </li>
              <li><a href="#">Another action</a>
              </li>
              <li><a href="#">Something else here</a>
              </li>

              <li><a href="#">Separated link</a>
              </li>

              <li><a href="#">One more separated link</a>
              </li>
            </ul>
          </li>
          <li><a href="#">Clients</a>
          </li>
          <li><a href="#contact-me">Contact Me</a>
          </li>
        </ul>
      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
  </nav>


  <section id="section1" class="section1">
    <div class="hero">
      <div class="profile box">
        <div class="shape"></div>
        <div class="shape2">
          <p>kjjjjjjjjjkjjjkkjkj</p>
        </div>
      </div>
    </div>





    <a href="#section2"><i class="fa fa-angle-down" style="font-size:100px;"></i></a>

  </section>
</html>

Upvotes: 1

Views: 1241

Answers (3)

Richard Tyler Miles
Richard Tyler Miles

Reputation: 683

I personally use Jquery's Backstretch. The code is responsive and easy to plug in by using:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

And then adding the style/image to a .css doc like so:

<style>
.content-wrapper {
    /* This image will be displayed fullscreen */

    background: url('http://site.rockbottomgolf.com/blog_images/Hole%2012%20-%20Imgur.jpg') no-repeat center fixed;

    scroll-x /* Ensure the html element always takes up the full height of the browser window */ min-height: 100%;
    /* The Magic */
    background-size: cover;
}
</style>

EDIT!! - I posted a link to Jquery but not the actual responsive backstretch plugin. Note you must keep the required script above and then add backstretch following it since it is a dependency. Download The Backstretch Plugin Here

You would then add the script as follows: 

<script src="example.com/relative-Path/jquery.backstretch.min.js"></script>

Upvotes: 0

Michael Coker
Michael Coker

Reputation: 53709

Use background-size: cover

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

cover - A keyword that is the inverse of contain. Scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). The image "covers" the entire width or height of the container. When the image and container have different dimensions, the image is clipped either left/right or top/bottom.

Alternatively you might try contain depending on your desired behavior, but from the looks of your portfolio, cover is what you want

contain: A keyword that scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). Image is letterboxed within the container. When the image and container have different dimensions, the empty areas (either top/bottom of left/right) are filled with the background-color.

* edit - also added background-position: center center; background-repeat: no-repeat; in the shorthand background property for .hero since from the looks of your portfolio, you want those.

<!DOCTYPE html>
<html>

<head>
  <html lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Liam Docherty Digital Portfolio</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/style.css">

  <style>
    body {
      margin: 0;
      padding: 0;
    }
    
    .navbar.navbar-default {
      background-color: #4D5061;
      height: 10vh;
      z-index: 100;
    }
    
    .navbar.navbar-default ul {
      list-style-type: none;
      text-align: right;
    }
    
    .navbar.navbar-default ul li {
      display: inline-block;
    }
    
    .dropdown-menu li {
      text-align: center
    }
    
    .dropdown .dropdown-menu {
      background-color: #4D5061;
    }
    
    .dropdown .dropdown-menu a {
      color: white;
    }
    
    .navbar.navbar-default ul li a {
      display: inline-block;
      padding: 3.5vh 8px 4px;
      color: white;
      text-decoration: none;
      font-size: 14pt;
      font-family: 'Roboto', sans-serif;
    }
    
    .navbar.navbar-default ul li:after {
      content: '';
      position: absolute;
      right: 50%;
      bottom: 0;
      left: 50%;
      height: 3px;
      background-color: #FFFFFF;
      border-radius: 9px;
      transition: all .2s;
    }
    
    .navbar.navbar-default ul li a:hover {
      color: white;
    }
    
    .nav.navbar-nav,
    .nav.navbar-nav>li {
      float: none;
    }
    
    .navbar.navbar-default ul li:hover:after {
      right: 0;
      left: 0;
    }
    
    .nav-title {
      font-size: 14pt;
      margin: 0;
      top: 35px;
      left: 50px;
      width: 100%;
      position: absolute;
      text-align: center;
      color: white;
      font-family: 'Roboto', sans-serif;
    }
    
    .navbar.navbar-default ul.dropdown-menu li,
    .navbar.navbar-default ul.dropdown-menu li a {
      position: relative;
      display: block;
    }
    
    #logo {
      padding-top: 2vh;
      padding-left: 20px;
      float: left;
    }
    
    .hero {
      background: url("https://static.pexels.com/photos/48727/pexels-photo-48727.jpeg") center center no-repeat;;
      background-attachment: fixed;
      position: relative;
      background-size: cover;
      text-align: center;
      width: 100%;
      max-width: 100%;
      width: 100vw;
      height: 100%;
    }
    
    section {
      position: relative;
      height: 95vh;
    }
    
    .section1 {
      height: 100vh;
      text-align: center;
      color: white;
    }
    
    .section2 {
      background-color: #11B5E4;
      text-align: center;
      color: white;
    }
    
    .section3 {
      background-color: #FFFFFF;
      text-align: center;
      color: white;
    }
    
    .fa-angle-down {
      color: #4D5061;
      position: absolute;
      bottom: 0px;
    }
    
    .fa-angle-up {
      color: #4D5061;
      position: absolute;
      bottom: 0px;
    }
    
    .footer {
      height: 6vh;
      background-color: #4D5061;
      padding: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
    
    .footertext {
      font-size: 14pt;
      color: white;
      font-family: 'Roboto', sans-serif;
      text-align: center;
    }
    
    .profile.box {
      bottom: 0;
      height: 50%;
      left: 0;
      margin: auto;
      position: absolute;
      right: 0;
      top: 0;
      width: 50%;
    }
    
    .shape {
      border-radius: 25px;
      background: #4D5061;
      content: url(http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg);
      color: white;
      height: 250px;
      margin: auto;
      padding: 3px;
      width: 250px;
    }
    
    .shape2 {
      background: linear-gradient(35deg, #4D5061, #4D5061);
      border-radius: 85px;
      color: white;
      height: 40px;
      margin: 1% auto;
      opacity: 0.9;
      padding: 0px;
      width: 250px;
    }
  </style>

</head>

<body>
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <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="#"><img src="http://placehold.it/60x60" alt="Your Brand Name"></a>
        <h1 class="nav-title">Liam Docherty's Digital Portfolio</h1>
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li><a href="#">Home</a>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">About Me <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a>
              </li>
              <li><a href="#section3">Contact</a>
              </li>
              <li><a href="#">Something else here</a>
              </li>
              <li><a href="#">Separated link</a>
              </li>
              <li><a href="#">One more separated link</a>
              </li>
            </ul>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Units <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a>
              </li>
              <li><a href="#">Another action</a>
              </li>
              <li><a href="#">Something else here</a>
              </li>

              <li><a href="#">Separated link</a>
              </li>

              <li><a href="#">One more separated link</a>
              </li>
            </ul>
          </li>
          <li><a href="#">Clients</a>
          </li>
          <li><a href="#contact-me">Contact Me</a>
          </li>
        </ul>
      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
  </nav>


  <section id="section1" class="section1">
    <div class="hero">
      <div class="profile box">
        <div class="shape"></div>
        <div class="shape2">
          <p>kjjjjjjjjjkjjjkkjkj</p>
        </div>
      </div>
    </div>





    <a href="#section2"><i class="fa fa-angle-down" style="font-size:100px;"></i></a>

  </section>
</html>

Upvotes: 3

Robert I
Robert I

Reputation: 1527

You can try 

<div>
    <img src="IMAGE LINK" style='width:100%;' border="0" alt="Null">
</div>

Source: Make an image responsive - simplest way

Upvotes: 0

Related Questions