[Fixed]-Creating a header image with bootstrap

by

1👍

✅

First of all I will answer your question about mixing things.

When you use Django, this means that you have a Django application that renders some html and sends it to the client to display it in a browser. This html, uses bootstrap in order to give a consistent and responsive style. What bootstrap does is to apply some css to your html. However, if the functionalities provided by bootstrap are not enough, you can always include your own custom css and there is no problem with that.

About your header, I would do it having a bootstrap row with a background image and a col with padding to include the image:

<div class="row" id="header">
    <div class="col-md-3 col-md-offset-9">
        <img src="{% static "mapvpage/BananaFarm.jpg" %}" alt="My image"/>
    </div>
</div>

Then, you would need to add the background image of the header to the header div:

#header {
    background-image:url("paper.gif");
}

You can easily find some more properties to add to the header css in order to center the image, expand it to fill the whole div…

👤Joan Vilà

Leave a comment