Jump to content
teuzero

Como eu ponho imagem via css no meu site?

Recommended Posts

esse é o link do meu site:https://xraros.000webhostapp.com/

 

o problema é que no arquivo css test.css no bloco de código:

eu escrevi esse código:

 

@media screen and (min-width: 800px) and (max-width: 848px){
	.busca {
		width:200px;
	}

	.barra {
		background:url(../img/barra.png)no-repeat;
	}

}

escrevi esse código:

.barra {
		background:url(../img/barra.png)no-repeat;
	}

 

no index da pagina tem a div:

<div class="barra">

	</div>
	

 

mais no site não carrega essa imagem.

como eu carrego essa imagem via css dentro de um div?

Share this post


Link to post
Share on other sites
Em 06/09/2019 at 11:21, teuzero disse:

esse é o link do meu site:https://xraros.000webhostapp.com/

 

o problema é que no arquivo css test.css no bloco de código:

eu escrevi esse código:

 


@media screen and (min-width: 800px) and (max-width: 848px){
	.busca {
		width:200px;
	}

	.barra {
		background:url(../img/barra.png)no-repeat;
	}

}

escrevi esse código:


.barra {
		background:url(../img/barra.png)no-repeat;
	}

 

no index da pagina tem a div:


<div class="barra">

	</div>
	

 

mais no site não carrega essa imagem.

como eu carrego essa imagem via css dentro de um div?

 

Tente este aqui veja se resolve

 

<head>
<style>
    .barra {
    background-image:url(./img/Chicago.jpg);
	background-repeat: no-repeat;
    padding:100% 0 150px;
    text-align:center
}


/* Estilos aplicados a larguras em pixels */
@media screen and (min-width: 800px) and (max-width: 848px){
	.busca {
		width:200px;
	}

      .barra  {
            background-image:url(./img/Chicago.jpg);
        	background-repeat: no-repeat;
            padding:100% 0 150px;
       }
}
</style>
</head>
<body>
<div class="barra">

</div>  

</body>

Só fazer as alterações ao teu modo..

Espero ter ajudado ai...

Share this post


Link to post
Share on other sites
On 9/7/2019 at 9:12 PM, Jack Oliveira said:

 

Tente este aqui veja se resolve

 


<head>
<style>
    .barra {
    background-image:url(./img/Chicago.jpg);
	background-repeat: no-repeat;
    padding:100% 0 150px;
    text-align:center
}


/* Estilos aplicados a larguras em pixels */
@media screen and (min-width: 800px) and (max-width: 848px){
	.busca {
		width:200px;
	}

      .barra  {
            background-image:url(./img/Chicago.jpg);
        	background-repeat: no-repeat;
            padding:100% 0 150px;
       }
}
</style>
</head>
<body>
<div class="barra">

</div>  

</body>

Só fazer as alterações ao teu modo..

Espero ter ajudado ai...

não deu.

Share this post


Link to post
Share on other sites

A imagem tá lá sim, só que tem as dimensões de 0px por 0px.

Por exemplo:

.barra {
    background-image: url(./img/Chicago.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    min-height: 150px
}

Share this post


Link to post
Share on other sites
23 hours ago, Omar~ said:

A imagem tá lá sim, só que tem as dimensões de 0px por 0px.

Por exemplo:

.barra {
    background-image: url(./img/Chicago.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    min-height: 150px
}

Muito obrigado mesmo, foi de grande ajuda, eu não sabia que a imagem tava 0px 0px, eu pensava que carregava com tamanho original da imagem, obrigado mesmo.:smile:

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By vinihhylian0103
      Olá, Boa Noite.
      Estou usando o Iframe pra exibir meu form de login na minha página central, porém, quando eu clico no botão login, o profile parece somente no iframe, teria como eu fazer o profile ser redirecionado  na página principal.
       
      Segue o código:
        <div class="modal fade" id="modalLRFormDemo2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">     <div class="modal-dialog cascading-modal" role="document">       <!--Content-->       <div class="modal-content">                            <iframe marginwidth="50" height="500px" width="500px" src="CADASTROS_LOGINS\LOGIN\index.html"> Seu navegador não suporta frames )= </iframe>                 <center><button type="button" class="btn btn-outline-info waves-effect ml-auto" data-dismiss="modal">Fechar</button></center>                 <br>               </div>             </div>             <!--/.Panel 8-->           </div>         </div>       </div>  
    • By Anderson Maciel
      Boa tarde pessoal,

      Estou quebrando a cabeça para resolver um problema, tenho uma div dinâmica que carrega uma <table> em uma das colunas deveria apresentar o componente Switchery, esta <table> é montada a partir de uma função PHP que faz o select em uma tabela do banco de dados conforme abaixo:
       
      echo '<table class="table table-hover"> <thead> <tr> <th>Nome</th> <th>Agrupamento</th> <th>Ativo</th> </tr> </thead> <tbody>'; foreach($data as $row) { If ($row['ativo'] == 1) { $vativochk = "checked"; } else { $vativochk = ""; } echo '<tr> <td>'.$row['nome'].'</td> <td>'.$row['agrupamento'].'</td> <td><input type="checkbox" name="ativo_grid" class="js-switch" '.$vativochk.' disabled="disabled"></td> </tr>'; } echo '</tbody> </table>'; Aqui está o Ajax que chama e retorna atualizando a DIV:
       
      function atualiza_grid_graficos() { $.ajax({ type: "POST", url: "hubfuncind.php", data: { id_tabindicadores_paineis: $('#id_tabindicadores_paineis').val(), acao: "gridgraficos" }, success: function(data) { $('#conteudo').html(data); } }); } O retorno vem certinho, mas apenas o componente Switchery está vindo desconfigurado, ou seja vem um checkbox normal (html).

      O que é mais incrível é que neste mesmo formulário mais acima tenho este mesmo componente funcionando normalmente, somente dentro da DIV dinâmica é que fica desconfigurado conforme imagem anexa.

      Será que alguém já passou por isso?

    • By Pitag346
      Olá pessoal, tudo bem? 
      Estou com uma dúvida bem bobinha... mas gostaria que me ajudassem a solucionar.
       
      Alguns sites utilizam uma forma de carregar as imagens deixando elas embaçadas/desfocadas. Até que são carregadas e elas aparecerem normalmente...
       
      Exemplo básico seria esse site: https://www.redbull.com/br-pt/athletes
       
      Sabem me explicar como isso é feito, e pra que ? Meu site usa bastante imagens, gostaria de saber se tem algum benefício ou se seria somente estética ... Obrigado! 
       
      (Não sei se isso é feito em JavaScript, acredito que sim... perdão se publiquei na área errada).
    • By Emilio Saymon
      tenho um site que precisa que assim que eu aperte um botão ele verifiquei se a variavel sala for sala 1 ele abre no modal da sala1 se não abre no modal da sala2. Dei uma pesquisada e vi que da pra fazer com a função onclik(), mas não tenho noção como fazer. Aqui vai o código.
      botão <td><a href="#" class="btn btn-primary" data-toggle="modal" data-target="#modalLoginForm">XXX</a></td> <!-- sala 1 --> <div class="modal-body mx-3"> <div class="md-form mb-4"> <form method="POST" action="valida.php"> <h6>Sala 1</h6> <input type="password" class="form-control validate" name="senha"> </div> </div> <button type="submit" class="btn btn-primary" name="enviar">Entrar</button> </form> </div> </div> </div> </div> </div> <!-- sala 2 --> <div class="modal fade" id="modalLoginForm2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header text-center"> <h4 class="modal-title w-100 font-weight-bold">Senha</h4> <button type="btn-primary" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body mx-3"> <div class="md-form mb-4"> <form method="POST" action="valida.php"> <p>Sala 2</p> <input type="password" class="form-control validate" name="senha2"> </div> </div> <div class="modal-footer d-flex justify-content-center"> <button type="submit" class="btn btn-primary" name="enviar1">Entrar</button> </form> </div> </div> </div> </div>  
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.