Jump to content
Sign in to follow this  
ma_gr

Fixar background image em dispositivos móveis

Recommended Posts

Tenho um problema em dispositivos móveis que ao rolar a página a imagem de background está se movendo um pouco e, assim, se redimensionando, como pode ser visto em http://www.fisioterapeutacamila.com/my-bootstrap/sobre.html

Já tentei várias alternativas css e até javascript mas o problema persiste.

.bg-1, .bg-2, .bg-3,
.bg-1:after, .bg-2:after, .bg-3:after { 
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: 0; 
}

.bg-1 li span, .bg-2 li span, .bg-3 li span { 
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  color: transparent;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: none;
  opacity: 1;
  z-index: 0;
}

.bg-1 li span { background-image: url(../images/slide-1.jpg); }
.bg-2 li span { background-image: url(../images/slide-3.jpg); }
.bg-3 li span { background-image: url(../images/slide-2.jpg); }

ol,ul {
  list-style:none;
}

html

<body>

  <ul class="bg-2">
    <li><span></span></li>
  </ul>

  <nav class="navbar">
    <div class="container-fluid social-nav">

  ...

Alguma sugestão?

Share this post


Link to post
Share on other sites

Seu caso é mais complexo.

Veja que ao reduzir a janela realmente vai perder as laterias da imagem.

O certo séria trabalhar com o

background-size: cover;
background-size: contain;

Mas no seu caso como é slider, eu sugiro você usa BGs diferente para telas verticais e horizontais.

Abs!

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
Sign in to follow this  

  • Similar Content

    • By srs1999_
      Tópico
       
      Site em Código
      Sobre desenvolver sites sem o wordpress que ja tá tudo ali feito que seja um site dinâmico ou seja com banco de dados , APIs de pagamento, Painel para o usuário ,  além de todas  as funções que tem no wordpress e você teria propriedade pra explicar sobre detalhes mais técnicos da produção onde no wordpress só quem entende de progrqmação explicaria algum detalhe técnico 
      Então usando basicamente : 
      FRONT END 
      HTML 
       CSS 
      JAVASCRIPT 
      ALGUMA DE BACKEND COMO PHP E BANCO DE DADOS
      Pode se criar sites/sistemas tão bons ou melhores que no wordpress
       
      Fato : o proprio wordpress é feito em php e ate o proprio facebook tbm em php
      Fato 2 :  cerca de 70% dos sites são feitos em Wordpress
       
      Acho esse lance de procurar o caminho mais fácil limita muito a pessoa por exemplo é facil editar imagens no paint bem intuitivo , agora para editar no photoshop com muitas outras possibilidades  acaba sendo importante ir explorando essa elaboração mais difícil  com um mesmo objetivo. No caso do exemplo ( editar imagens )  
       
      Reflexão:
      Vale a pena se dedicar a trabalhar com a ferramenta Wordpress apenas por ser um meio rápido de ganhar dinheiro ?
      Ou trabalhar sem wordpress  usando tudo que exigido pra criar coisas originais mais que não seria tão rápido a produção. Mas creio que além dos sites feitos também geraria a possibildade de vender o sistema web criado para o cliente personalizar .
       
      Você Desenvolveria de que forma :
       Wordpress apenas ?
       
      Conhecer programação pra trabalhar 
      com  Wordpress ?
       
      Produzir tudo só com programação totalmente dinâmico sem  Wordpress?
    • By mikuzuhara
      Olá, boa tarde,
       
      Estou implementando uma função de editar registro de um banco de dados MySQL utilizando a linguagem PHP com MySQLi. Quando clico no link editar, ele vai para uma página de edição e gostaria de imprimir os valores das colunas do registro a editar nos respectivos campos do formulário em HTML. Veja o código da página abaixo:
       
      <?php include_once('conexao.php'); $id = $_GET['id']; $pesquisa = "SELECT * FROM alunos WHERE id = '$id'"; $resultado = mysqli_query($conexao, $pesquisa); $registro = mysqli_fetch_array($resultado); $nome = $registro['nome']; $curso = $registro['curso']; mysqli_close($conexao); ?> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Cadastro de alunos</title> </head> <body> <h3>Cadastro de novos alunos</h3> <form action="proc_edicao.php" method="POST"> <label>Nome: <input type="text" name="nome" placeholder="Digite o nome aqui" value="<?php echo $nome; ?>"> </label> <br><br> <label>Curso: <input type="text" name="curso" placeholder="Digite o nome aqui" value="<?php echo $curso; ?>"> </label> <br><br> <input type="submit" value="Cadastrar"> </form> </body> </html> Aparentemente, não há nada de errado com o conteúdo de value, mas rodando no servidor local nos campos Nome e Curso aparece exatamente o código como está escrito (<?php echo $nome; ?>) e não o conteúdo da variável $nome (o mesmo acontecendo para o campo Curso).
      Pesquisei na internet sobre isso, e em tudo que encontrei se refere a essa codificação de value como correta.
      O PHP 8.0 trabalha de outra forma? Quem puder esclarecer essa dúvida, agradeço.
       
      Aguardo retorno.
       
      Obrigado,
       
    • By Felper
      Estou tentando alterar a cor de fundo de uma célula, porém está dando o seguinte erro: Uncaught TypeError: Cannot read property 'style' of null .
      Segue abaixo o meu código:
       
      function criarTabela(){ // vamos criar o elemento HTML table var tabela = document.createElement("table"); tabela.border = "1px"; tabela.cellSpacing = "0px"; tabela.cellPadding = "3px"; // vamos criar o corpo da tabela, ou seja, o tbody var corpo = document.createElement("tbody"); tabela.appendChild(corpo); // vamos criar três linhas contendo quatro células cada uma for(var i = 0; i < 151; i++){ var linha = corpo.insertRow(-1); for(var j = 0; j < 5; j++){ var celula = linha.insertCell(-1); celula.setAttribute("id", "lin"+i+"col"+j); } } // vamos anexar a tabela recém-criada a um elemento div var container = document.getElementById("container"); container.appendChild(tabela); } cria.addEventListener('click', criarTabela); let lin1col0 = document.getElementById('lin1col0'); let lin2col0 = document.getElementById('lin2col0'); let lin3col0 = document.getElementById('lin3col0'); let lin4col0 = document.getElementById('lin4col0'); let lin5col0 = document.getElementById('lin5col0'); let num = 1; switch(num){ case 1: lin1col0.style.backgroundColor = "red"; break; case 2: lin2col0.style.backgroundColor ="red"; break; case 3: lin3col0.style.backgroundColor = "red"; break; case 4: lin4col0.style.backgroundColor = "red"; break; case 5: lin5col0.style.backgroundColor = "red"; break; default: alert("Erro!"); }  
×

Important Information

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