📣 Seu anúncio aqui? Anuncie no ForoBeta

Como ocultar barra de scroll em imagem de fundo com uma div?

  • Autor Autor ramonjosegn
  • Data de início Data de início
Tradução em andamento: em alguns minutos este tópico estará em português. Por enquanto, o conteúdo está no original em espanhol. Ver original
ramonjosegn

ramonjosegn

Sigma
Verificación en dos pasos activada
Usuário popular!
Chicos, estoy tratando de poner un fondo a una imagen con un div

El caso es que encontré este truco y me funciona, pero la barra de scroll inferior se sigue mostrando, ponga lo que ponga (overflow:hidden no quiere funcionar)

¿Cómo lo soluciono?

padding-left: 3000px;
margin-left: -3000px;

padding-right: 3000px;
margin-right: -3000px;

Acá el link donde estoy probando (el fondo es el de color negro)
? General Services ? ? Empresa
 
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Continuar com o Google Criar conta com e-mail
Leva 30 segundos · você volta a este tópico ao terminar
ramonjosegn disse:
Chicos, estoy tratando de poner un fondo a una imagen con un div

El caso es que encontré este truco y me funciona, pero la barra de scroll inferior se sigue mostrando, ponga lo que ponga (overflow:hidden no quiere funcionar)

¿Cómo lo soluciono?

padding-left: 3000px;
margin-left: -3000px;

padding-right: 3000px;
margin-right: -3000px;

Acá el link donde estoy probando (el fondo es el de color negro)
? General Services ? ? Empresa
Clique para expandir...

No se como lo estas haciendo . te digo como lo haria yo:

El div le pondria un ancho variable "width:100%;" y el fondo lo establezco negro con css usando background, y la imagen la pongo dentro del div haciendo que quede centrada con "margin:auto;"

---------- Post agregado el 17-ene-2014 hora: 22:19 ----------
ramonjosegn disse:
Chicos, estoy tratando de poner un fondo a una imagen con un div

El caso es que encontré este truco y me funciona, pero la barra de scroll inferior se sigue mostrando, ponga lo que ponga (overflow:hidden no quiere funcionar)

¿Cómo lo soluciono?

padding-left: 3000px;
margin-left: -3000px;

padding-right: 3000px;
margin-right: -3000px;

Acá el link donde estoy probando (el fondo es el de color negro)
? General Services ? ? Empresa
Clique para expandir...

Seria algo asi:

Inserir CODE, HTML ou PHP: 
<div align="center" style="width:100%;padding-bottom:30px;padding-top:30px;
background-color:#000;" ><div style="margin:auto;">
<img class="alignnone" alt="empresa_baner" src="http://www.generalservicesww.com/wp-content/uploads/2014/01/empresa_baner.png" width="928" height="300" data-id="1957" /></div></div>
 
sergiogeek disse:
No se como lo estas haciendo . te digo como lo haria yo:

Inserir CODE, HTML ou PHP: 
<div align="center" style="width:100%;padding-bottom:30px;padding-top:30px;
background-color:#000;" ><div style="margin:auto;">
<img class="alignnone" alt="empresa_baner" src="http://www.generalservicesww.com/wp-content/uploads/2014/01/empresa_baner.png" width="928" height="300" data-id="1957" /></div></div>
Clique para expandir...
El problema es que hay un div ya en en la plantilla, necesito "salir por fuera" de ese div...
 
ramonjosegn disse:
El problema es que hay un div ya en en la plantilla, necesito "salir por fuera" de ese div...
Clique para expandir...

Para crear eso usaste una pagina de Worpress o una Entrada. Te pregunto por el archivo a editar en cuestion es distinto

Si no entendi mal lo que vos queres es que el fondo negro con la imagen centrada cubra toda la pantalla. La solución sigue siendo usar un ancho variable como te dije. Para hacerlo tenes que poner el codigo fuera de ese div si o si (problema el cual bien decis que tenes).

Por lo que pude ver en el codigo fuente, vos pones el div dentro del div con el contenido de la Pagina/ Entrada . Lo ideal es que pongas el div con la imagen y el fondo entre el menu y el contenido, de esa manera el ancho 100% cubre toda la pagina.

Pero te va a quedar lo negro pegado al menu. ,lo que se soluciona con un padding-top en el div principal que contiene la imagen.

Seria asi:

<div del menu>
<div con la imagen>
<div con el contenido de la entrada pagina>

Ese seria el orden correcto, el como escribir el codigo al no estar viendo la plantilla desde Wordpress no puedo decirte, solo te puedo decir como poner el div con la imagen. Con el marging para que no te quede pegado lo negro al menu seria asi

Inserir CODE, HTML ou PHP: 
<div align="center" style="width:100%;margin-top:40px;padding-bottom:30px;padding-top:30px;
background-color:#000;" ><div style="margin:auto;">
<img class="alignnone" alt="empresa_baner" src="http://www.generalservicesww.com/wp-content/uploads/2014/01/empresa_baner.png" width="928" height="300" data-id="1957" /></div></div>
 
OK, gracias intentaré de esa manera, la plantilla es EVOLVE (gratuita)
 
Última edição:
sergiogeek disse:
Inserir CODE, HTML ou PHP: 
<div align="center" style="width:100%;margin-top:40px;padding-bottom:30px;padding-top:30px;
background-color:#000;" ><div style="margin:auto;">
<img class="alignnone" alt="empresa_baner" src="http://www.generalservicesww.com/wp-content/uploads/2014/01/empresa_baner.png" width="928" height="300" data-id="1957" /></div></div>
Clique para expandir...

Estoy testeando de esa forma, pero entonces el fondo sólo llega hasta el borde del div superior, y no ocupa todo el fondo de la página... nunca pensé que algo tan simple fuera tan problemático con CSS
 
ramonjosegn disse:
Estoy testeando de esa forma, pero entonces el fondo sólo llega hasta el borde del div superior, y no ocupa todo el fondo de la página... nunca pensé que algo tan simple fuera tan problemático con CSS
Clique para expandir...

Lo que pasa es que seguís dentro del div del cuerpo del post/pagina. Tenes que poner el código justo después de la llamada al header que algo como esto
Inserir CODE, HTML ou PHP: 
<?php get_header(); ?>

Inmediatamente después de eso pegas el código

Inserir CODE, HTML ou PHP: 
<div align="center" style="width:100%;margin-top:40px;padding-bottom:30px;padding-top:30px;
background-color:#000;" ><div style="margin:auto;">
<img class="alignnone" alt="empresa_baner" src="http://www.generalservicesww.com/wp-content/uploads/2014/01/empresa_baner.png" width="928" height="300" data-id="1957" /></div></div>

Cualquier cosa avisame
 
sergiogeek disse:
Lo que pasa es que seguís dentro del div del cuerpo del post/pagina. Tenes que poner el código justo después de la llamada al header que algo como esto
Inserir CODE, HTML ou PHP: 
<?php get_header(); ?>

Inmediatamente después de eso pegas el código

Inserir CODE, HTML ou PHP: 
<div align="center" style="width:100%;margin-top:40px;padding-bottom:30px;padding-top:30px;
background-color:#000;" ><div style="margin:auto;">
<img class="alignnone" alt="empresa_baner" src="http://www.generalservicesww.com/wp-content/uploads/2014/01/empresa_baner.png" width="928" height="300" data-id="1957" /></div></div>

Cualquier cosa avisame
Clique para expandir...

Gracias pero ya me rendí, jajaa, al menos con este theme, que es algo que estoy haciendo en el trabajo, en casa si eso lo veo con calma...
 
Você precisa estar logado ou cadastrado para responder aqui.

Tópicos similares

G
Como ocultar barra lateral em fóruns do BBPress?
Respostas
1
Visitas
415
guixe94
G
Voltar
Topo