Problems with image on the site

Asked

Viewed 582 times

1

Hi, guys, I want to put an image in the header of my website, but I can’t get it to stay on the right head. If I put in a code before the divorce, she doesn’t show up, and I put her in charge of the title, she shows up. I attached the images of how it’s going 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>

Imagem pela metade, dps da div jumb...

Imagem com codigo antes da div, não aparece nada

html css html5 bootstrap

  • Try setting the height. background-image:url(views/forum.jpg); height:400px;"

  • To no avail! :/

  • Revise your code because every structure is wrong, where the bootstrap <Nav closure?

  • If the Bootsrap css is being loaded correctly the float and margin is automatic.

  • 1

    @Nis, really if the bootstrap is right it shouldn’t be this, corrected my reply, sorry the hassle haha

  • the Nav is closed well below

Show 1 more comment

3 answers

2


@Dit Take a look at its structure, or the path of its image. Note also that from a look at the semantics of HTML5 and CSS3, the tag center for example is deprecated. Use anything 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>

hope I’ve helped

1

Make sure your structure follows the correct pattern by loading all required libraries. See Bootstrap documentation http://www.w3schools.com/bootstrap/bootstrap_get_started.asp

Below 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>
  <script src="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>

  • Denis I used this structure that you went through, and it worked reasonably well, I’m just not getting to increase the size of the container, which would be?

  • Swap the container-Fluid class with a class that determines the size by css. The container-Fluid class will respect the size of what is inside it.

0

This will cause the entire div to be filled 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>

Browser other questions tagged html css html5 bootstrap

You are not signed in. Login or sign up in order to post.