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 fsantos
      tenho o seguinte codigo e queria uma ajuda para fazer a iteração correta no arquivo json

       
      <!DOCTYPE html>
      <html>
      <head>
      <title>Mapa</title>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <style>
            body{margin:0 auto; width:480px; font-family: arial;}
          input.text, textarea, select {
          border: 1px solid #C0C0BA;
          -webkit-box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.17);
          -moz-box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.17);
          box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.17);
          }
      input, textarea, select {
          -webkit-border-radius: 12px;
          -moz-border-radius: 12px;
          border-radius: 12px;
          }
            @media only screen and (max-width: 600px) {
                body {
              width:90%;
                     }
              }
      </style>
      <script type="text/javascript" src="https://fcosantos.com.br/js/jquery-3.3.1.min.js"></script>
          <script type="text/javascript">
        $(document).ready(function () {
          $.getJSON('https://fcosantos.com.br/projetos/covidForm/portugal.json', function (data) {
            var items = [];
            var options = '<option value="">Escolha o distrito</option>';
            $.each(data, function (key, val) {
              options += '<option value="' + val.nome + '">' + val.nome + '</option>';
            });
            $("#estados").html(options);
            $("#estados").change(function () {
              var options_cidades = '';
              var str = "";
              $("#estados option:selected").each(function () {
                str += $(this).text();
              });
              $.each(data, function (key, val) {
                if(val.nome == str) {
                  options_cidades += '<option value="">Escolha o conselho</option>';
                  $.each(val.cidades, function (key_city, val_city) {
                    options_cidades += '<option value="' + val_city.nome + '">' + val_city.nome + '</option>';
                  });
                }
              });
              $("#cidades").html(options_cidades);

              //Busca das freguesias
              $("#cidades").change(function () {
              var options_freguesias = '';
              var str2 = "";
              $("#cidades option:selected").each(function () {
                str2 += $(this).text();
              });
              $.each(data, function (key2, val2) {
                if(val2.cidades.nome == str2) {
                  options_freguesias += '<option value="">Escolha a freguesia</option>';
                  $.each(val2.cidades.freguesias, function (key_freg, val_freg) {
                    options_freguesias += '<option value="' + val_freg.nome + '">' + val_freg.nome + '</option>';
                  });
                }
              });
              $("#freguesias").html(options_freguesias);
              }).change();

              }).change();
          });
        });
          </script>
          </head>
          <body>
              <form method="get" action="">

              <select name="uf" id="estados" style="width:47%; padding:5px; margin-bottom:8px; float:left;">
                  <option value=""></option>
              </select>
              <select name="cid" id="cidades" style="width:47%; padding:5px; margin-bottom:8px; float:right;">
              </select>
              <select name="freg" id="freguesias" style="width:100%; padding:5px; margin-bottom:8px;">
              </select>
              <input type="submit" value="Buscar" style="width:100%; padding:5px; margin-bottom:20px; ">
      </form>
      </body>
      </html>

      O que ocorre é que ao selecionar o primeiro select o segundo é preenchido altomaticamente, mais nao entendi porque o segundo não.
    • By barrigademel
      <head> <!-- Favicon --> <link href='http://www.iconj.com/ico/e/9/e993nwoswx.ico' rel='shortcut icon' type='image/x-icon'/> Não importa como eu adicione ou mude o campo favicon, ele simplesmente não sobe. já tentei re-fazer umas 15x, e mandar as 15 pro head todas sobem sem erro, mas não muda o favicon
    • By bleszerd
      Estou migrando para o frontend recentemente e tenho tido dificuldades para lidar com a formatação de estilos com o CSS, alguém poderia me ajudar? Minha intenção é que o conteúdo destacado em vermelho ocupe o local da marcação verde e o resto fique centralizado na tela. Estou usando o ReactJS para a composição, porém o CSS segue as mesmas regras do tradicional com HTML puro.
       
      Como podem ver até pela imagem, design não é meu ponto forte.
       
      Código do JSX (Componente do React):
      <div className="login-container"> <section className="form"> <form> <h1>Bem vindo!</h1> <input type="text" placeholder="Login" /> <input type="password" placeholder="Senha" /> <p>Possuo um Token</p> <input type="text" placeholder="Token" className="token-input" /> </form> </section> </div>  
      Código do CSS:
      .login-container{ display: flex; align-items: center; justify-content: center; width: 100%; max-width: 1120px; height: 100vh; margin: 0 auto; } .login-container section.form{ width: 100%; max-width: 350px; } .login-container section.form form{ display: flex; justify-content: center; width: 100%; max-width: 1250px; height: 100%; max-height: 700px; } .login-container section.form form h1{ color: #fff; font-weight: bolder; text-shadow: #1B182E 2px 2px 8px; font-size: 42px; margin-bottom: 32px; position: absolute; margin-top: -65px; background: transparent; } .login-container section.form form input{ display: flex; justify-content: space-between; margin: 5px; width: 180px; height: 40px; max-width: 100%; font-weight: bold; padding: 8px; border-radius: 5px; color: white; background: #0A0816; border: solid #0D0929 2px; } .login-container section.form form p{ } .login-container section.form form input + p + input{ background: black; border: solid yellow 2px; }  
      Pra quem não estiver afim de interpretar todo o código para tentar ajudar apenas diga o que você imagina que resolverá o problema. Obrigado desde já :)

    • By sander147
      Boa Tarde, estou com um problema ao por o menu ao lado direito, ele não fica alinhado com o campo de notícias, eu não faço ideia de como fazer eles ficarem lado a lado, alguém poderia me dar uma luz? eu estou seguindo um livro da casa do código mas os resultados não saíram iguais depois que eu fui além do livro. :/
      Deveria ficar assim:
       https://uploaddeimagens.com.br/images/002/561/267/original/menu.png?1585683825
       
      Ficou assim:

×

Important Information

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