Problems with image on site

Navigation
1

Hello, I want to put an image in the header of my site, but I can not get it right on the header. If I put the code before the div, it does not appear, its I place it in the div responsible for the title, it appears. I have attached the images of how it is getting and the code. 

	
	<nav class="navbar navbar-default" role="navigation">
		
	imagem antes, não parece nada		 
      
      <div class="jumbotron text-center">
		<div style="background-image:url(views/forum.jpg)">

          imagem aparece pela metade!
          
		
    <center><h1><b><font color="#00c6d7">ALLDISPOR</font></h1></b>
    
    <p>Fórum de Discussão</p></center>
    <br><br><br>
  </div></div>

    
asked by anonymous 16.09.2016 / 19:24

3 answers

2

@edit Take a look at its structure, or the path of your image. I also point out that at a glance at HTML5 and CSS3 semantics, the center tag for example is deprecated . Use anything of style in a css file 

.background {
  background:url(https://unsplash.it/900/200/?random);
}
h1 {
  text-align:center;
}
p {
  text-align:center;
}
<nav class="navbar navbar-default" role="navigation">
		
	imagem antes, não parece nada		 
      
  <div class="jumbotron text-center">
    <div class="background">
      imagem aparece pela metade!
      <h1>ALLDISPOR</h1>
      <p>Fórum de Discussão</p>
      <br/><Br/>
    </div>
  </div>

I hope to have helped

    
16.09.2016 / 19:58
1

Make sure your structure follows the correct pattern by loading all required libraries. See Bootstrap documentation link

Below is an example: 

<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><scriptsrc="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>ALLDISPOR</h1>
  <p>Fórum de Discussão.</p> 
  <figure>
      <img src="views/forum.jpg" />
  </figure>

</div>

</body>
    
16.09.2016 / 20:16
0

This will cause the entire div to be populated by the image. 

imagem antes, não parece nada        

  <div class="jumbotron text-center">
    <div style="background-image:url(views/forum.jpg);width:100%;height:100%">

      imagem aparece pela metade!


<center><h1><b><font color="#00c6d7">ALLDISPOR</font></h1></b>

<p>Fórum de Discussão</p></center>
<br><br><br>

    
17.09.2016 / 00:59
Modern Web: SPA / REST [closed] Select with Search Terms