Cómo extender una imagen transparente para que cubra todo el fondo sin repetirse

Alebrije Seguir

Curioso
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
9 Jun 2014
Mensajes
12
Hola a todos, tengo el siguiente caso (necesito ayuda):

Tengo una imagen estampada de fondo que se repite de derecha a izquierda, encima tengo una imagen negra con transparanecias que hace un efecto muy chido, sin embargo esta última -la de las transparencias- también se repite y se ven "los bordes" de donde termina y empieza de nuevo y no me gusta como se ve, en el caso de la imagen estampada no se ven los bordes porque es de fondo blanco así que se despista...

Quisiera:

1.- Extender la imagen transparente al tamaño de todo el background, que no se repita ...ó....
2.- Que no se vean los bordes de donde termina y comienza, termina y comienza-...

Les dejo la codificación que estoy usando y una foto de lo que he expuesto

Desde ya, muchas gracias a todos

HTML:
body{ background: url("http://1.bp.blogspot.com/-uer1_fC8jm4/U9CLBfWJqbI/AAAAAAAAAXA/uy78Ds3-5GI/s1600/BG-gray.png"),url("http://2.bp.blogspot.com/-hxFdyNNSsHM/U8_wtu9UKXI/AAAAAAAAAWY/73AGv2JuUpU/s1600/alebrijes-bn.jpg") repeat scroll 0 0 transparent; color: #333; height: 100%; padding: 0; font-family: 'Lora',Georgia,Serif; font-size: 18px; line-height: 29px; border-top: 5px solid #C0392B; }
.clr { clear:both; float:none; }
Bug-del-alebrije800px.png
 

Alebrije

Curioso
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
9 Jun 2014
Mensajes
12
¿a la imagen? ¿...al documento png? -Psss no tiene bordes, no se le ven bordes :fatigue:
 

RafaG

Alfa
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
3 Jun 2014
Mensajes
15
Prueba añadiendo estas dos líneas al estilo del body:

Insertar CODE, HTML o PHP:
background-size:cover, auto;
background-attachment:fixed,scroll;
Edit fiddle - JSFiddle

La primera línea hace que el primer fondo (el degradado) cubra toda la página y que el segundo fondo (el de los dragones) permanezca normal.
La segunda línea hace que el primer fondo se mantenga fijo cuando se hace scroll mientras que el segundo fondo funcione con normalidad.

Espero que sea el efecto que buscabas. Un saludo.
 

juanom07

Gamma
Programador
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
23 Jun 2010
Mensajes
453
Para mí la forma más facil de solucionar eso, es quitarle el espacio en blanco que tiene la imagen, es decir, recortar la imagen y volver a subirla al servidor
 
Arriba