title: Creating a header image with bootstrap
body: <p>To learn more about web development I am trying to make a webapp.</p>
  
  <p>My first challenge is working out how to interface Django, Bootstrap and custom css. </p>
  
  <p>I am trying to create a nav bar consisting of an image where I can overlay a profile image, a link to your account settings etc. I would like it to look like the following image:</p>
  
  <p><a href="https://i.stack.imgur.com/B3GSl.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/B3GSl.jpg" alt="enter image description here"></a></p>
  
  <p>Essentially it would be a responsive nav bar where the height is set at say 200px and the width is always 100% of your browser window. </p>
  
  <p>I have got my custom css as below:</p>
  
  <pre><code>.wide {
    width:100%;
    height:100%;
    height:calc(100% - 1px);
    height:200px;
    background-size:cover;
  }
  </code></pre>
  
  <p>And I have tried to interface this with the HTML below:</p>
  
  <pre><code>&lt;head&gt;
      &lt;meta charset="utf-8"&gt; 
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
       {% load static %}
      &lt;link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"&gt;
      &lt;link rel="stylesheet" href="/static/mapvpage/style.css"&gt;
  
  
    &lt;/head&gt;
  
  
    &lt;body&gt;
  
  &lt;div class="wide"&gt;
  
  &lt;img src="{% static "mapvpage/BananaFarm.jpg" %}" alt="My image"/&gt;
      &lt;div class="col-xs-5 line"&gt;&lt;hr&gt;&lt;/div&gt;
      &lt;div class="col-xs-2 logo"&gt;Logo&lt;/div&gt;
      &lt;div class="col-xs-5 line"&gt;&lt;hr&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I have got the image into my page. However I cannot work out how to change the image size in any way. I am also a bit confused as to how custom CSS interacts with Bootstrap and Django. Can I just use a mix of Bootstrap and custom CSS as and when I want for different elements? </p>
  
  <p>Many thanks for any help, I have been working on this for a while and getting nowhere so would appreciate some guidance!  </p>
  
  <p><strong>Update:</strong></p>
  
  <p>CSS:</p>
  
  <pre><code>#header {
      background-image:url("paper.gif");
      max-width:100%;
      max-height:auto;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code> &lt;head&gt;
      &lt;meta charset="utf-8"&gt; 
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
       {% load static %}
      &lt;link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"&gt;
      &lt;link rel="stylesheet" href="{% static "mapvpage/style.css" %}"&gt;
  
  
    &lt;/head&gt;
  
  
    &lt;body&gt;
  
  &lt;div class="row" id="header"&gt;
      &lt;div class="col-md-3 col-md-offset-9"&gt;
          &lt;img src="{% static "mapvpage/BananaFarm.jpg" %}" alt="My image"/&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Note I loaded the CSS stylesheet in a different way (as suggested in the other answer). It was working before (as I tested it with simple font sizes etc) so not sure if that was necessary. </p>