¿Cómo ocultar barra de scroll en imagen de fondo con un div?

ramonjosegn

ramonjosegn Seguir
Seguidores
12

Sigma
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario popular!
Desde
14 Feb 2010
Mensajes
70.591
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
 
U

Usuario eliminado 34503

ramonjosegn dijo:
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
Hacer clic 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 dijo:
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
Hacer clic para expandir...

Seria algo asi:

Insertar CODE, HTML o 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>
 
ramonjosegn

ramonjosegn

Sigma
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario popular!
Desde
14 Feb 2010
Mensajes
70.591
sergiogeek dijo:
No se como lo estas haciendo . te digo como lo haria yo:

Insertar CODE, HTML o 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>
Hacer clic para expandir...
El problema es que hay un div ya en en la plantilla, necesito "salir por fuera" de ese div...
 
U

Usuario eliminado 34503

ramonjosegn dijo:
El problema es que hay un div ya en en la plantilla, necesito "salir por fuera" de ese div...
Hacer clic 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

Insertar CODE, HTML o 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>
 
ramonjosegn

ramonjosegn

Sigma
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario popular!
Desde
14 Feb 2010
Mensajes
70.591
OK, gracias intentaré de esa manera, la plantilla es EVOLVE (gratuita)
 
Última edición:
ramonjosegn

ramonjosegn

Sigma
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario popular!
Desde
14 Feb 2010
Mensajes
70.591
sergiogeek dijo:
Insertar CODE, HTML o 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>
Hacer clic 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
 
U

Usuario eliminado 34503

ramonjosegn dijo:
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
Hacer clic 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
Insertar CODE, HTML o PHP: 
<?php get_header(); ?>

Inmediatamente después de eso pegas el código

Insertar CODE, HTML o 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
 
ramonjosegn

ramonjosegn

Sigma
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario popular!
Desde
14 Feb 2010
Mensajes
70.591
sergiogeek dijo:
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
Insertar CODE, HTML o PHP: 
<?php get_header(); ?>

Inmediatamente después de eso pegas el código

Insertar CODE, HTML o 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
Hacer clic 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...
 
Hay que estar conectado o registrado para responder aquí.
Arriba