+ 1

Hey guys, how do i add background image to a div in bootstrap?

<div class="row"> <img src="images/golem.png" width="100%;" height="550px;"> <nav class="nav nav navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">golem</a> </div> <ul class="nav navbar-nav"> <li><a href="#"> 01--ABOUT</a></li> <li><a href="#"> 02--PRESS</a></li> <li><a href="#"> 03--TEAM</a></li> <li><a href="#"> 04--HIRING</a></li> <li><a href="#"> 05--LEARN MORE</a></li> <li><a href="#"> 06--ALPHA</a></li> <li><a href="#"> 07--GITHUB</a></li> </ul> </div> </nav> </div>

background bootstrap div image

6th Oct 2017, 9:56 PM

Ifunanya

4 Answers

+ 7

<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <div class="row" style="background-color:green"> <img src="images/golem.png" width="100%;" height="550px;"> <nav class="nav nav navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">golem</a> </div> <ul class="nav navbar-nav"> <li><a href="#"> 01--ABOUT</a></li> <li><a href="#"> 02--PRESS</a></li> <li><a href="#"> 03--TEAM</a></li> <li><a href="#"> 04--HIRING</a></li> <li><a href="#"> 05--LEARN MORE</a></li> <li><a href="#"> 06--ALPHA</a></li> <li><a href="#"> 07--GITHUB</a></li> </ul> </div> </nav> </div> </body> </html> TRY THIS.

6th Oct 2017, 10:29 PM

Kabulput

+ 2

@Andrew, i tried using CSS. I created a custom CSS but i don't know how to call it. Remember i'm using bootstrap, and i am still very new with it. So the question is, from my code, how do i call the div that i assigned a background image to in CSS?

8th Oct 2017, 1:24 AM

Ifunanya

+ 1

@Muhammadu, adding it like this "<div class="row"> <img src="images/golem.png" width="100%;" height="550px;">" would make the image just an image in the web browser. I finally figured out a way to do it. This is what i did; <div class="row" style="background-image: url(images/golem.png); height: 600px; background-repeat: no-repeat; background-size:cover;> <nav class="nav nav navbar-fixed-top"> <div class="container-fluid col-lg-12"> <div class="navbar-header">  </div> <ul class="nav navbar-nav"> <li><a href="#"> 01--ABOUT</a></li> <li><a href="#"> 02--PRESS</a></li> <li><a href="#"> 03--TEAM</a></li> <li><a href="#"> 04--HIRING</a></li> <li><a href="#"> 05--LEARN MORE</a></li> <li><a href="#"> 06--ALPHA</a></li> <li><a href="#"> 07--GITHUB</a></li> </ul> </div> </nav> </div> But then, it deactivated the nav just below the div. I have no idea how to find my way around it.

8th Oct 2017, 1:22 AM

Ifunanya