46

Background fijo

Cuando hacemos scroll en el blog, es decir, cuando subimos o bajamos por la pantalla, nuestro fondo y el contenido, suben o bajan a la vez.
Podemos hacer que nuestro fondo permanezca fijo y sean las entradas y sidebar, las que suban y bajen. Si tienes de fondo una imagen, el efecto queda muy vistoso.
Puede hacerse con las plantillas originales de Blogger, en la dots, por ejemplo, queda muy bien.
Solo hay que añadir esta línea: background-attachment: fixed; en el body del CSS:

body {
background:url_de_nuestra_imagen;
background-attachment: fixed;

Entradas Relacionadas:

46 comentarios:


toxicboy

Hola Rosa. Me alegra que una persona que se dedica a dar información para mejorar blogs me diga que el mio está en términos generales bien. La verdad es que llevo muy poquito tiempo con él pero me está gustando mucho esto de "tunear" los blogs.

Ahora que conozco tu blog, no dudaré en pasarme por el frecuentemente para apreder de tus conocimientos.

Y si, la publi me sale por el contador de visitas que tengo... Se que existen contadores gratuitos pero como este ha quedado muy a juego con los colores corporativos del blog me da un poco de pereza quitarlo.

¿Es tan molesta la publi que salta?

Besos

toxicboy

Por cierto Rosa, igual esto es un atraco a mano armada pero necesito saber si sabes algo de esto que me ha pasado.

Tengo un gran problema y me gustaría saber cual puede ser el origen del mismo. Desde hace dos días no puedo realizar cambios en el diseño de BLOGGER debido a (segun me dice la barra exploradora) errores internos del servidor 500 o no se que historias.

No se si esto es culpa mía, es de blogger o sencillamente soy el único usuario al que le ha pasado pero lleva ya bastante tiempo (dos dias) así.

¿Qué puedo hacer?

Rosa

Saludos toxicboy!

No, en realidad ese popup no es muy molesto, una vez que lo cierras no vuelve a salir, simplemente te advertía por si no sabías a que era debida su aparición.

En cuanto a lo otro, supongo que es culpa del server de Blogger, y no, no eres tu solo, hay más gente con el problema, de hecho hace días que yo misma no puedo añadir elementos en la sidebar, aunque a mi no me sale lo del 500 ese...

toxicboy

Ah ok

Si. a mi me pasa eso basicamente. no puedo mover o cambiar elementos de la sidebar...

en fin, esperemos que cuando termine el fin de semana el equipo de blogger se ponga a currar y lo arregle.

gracias!

toXicboy

Hola de nuevo Rosa. La verdad es que conocerte ha sido todo una ayuda. Me he estado empapando tu blog entero (tb he visionado el otro que tienes) y me he quedado preocupado con todo lo he oido sobre lo que te puede pasar si quitas la barra de blogger... ¿es todo es verdad?

Yo creo que la quite y me gustaría digamos OCULTARLA y ya está. He visto tu explicacion pero no se exactamente donde tengo que insertar la etiqueta HTML.

Una última cosa de verdad. He leido el post para recuadrar los post con cajas de texto. Yo lo hice con otro truco y por eso no he podido aplicar una función que explicas que separa el texto de la caja.

En fin, ayuda!!!!!

Rosa

Hola toxic, el código para ocultarla ha de ir antes de ]]><b:skin>

Si ya la tienes eliminada, puedes hacer como hacen muchos (yo lo he hecho) poner uno de los logotipos de Blogger, para compensar, dicen que a la hora de revisar ellos tu blog, eso sirve como la nabvar.

Y lo otro que preguntas...no se a que post te refires, mira es mejor que cuando preguntes algo de algún post, lo pongas en sus comentarios, así sabré a que te refires sin problemas.

Si es porque crees que al ser un post antiguo no me voy a enterar, tu tranquilo, tengo el aviso de comentarios y me llega al email que tengo siempre abierto. ;-)

la novia

has cambiado el fondo verdad? Esta chulo, me gusta :)

Superichy

Gracias Señora Ro, amo tu Escaparate, pues me sirve de algo de ayuda (toda);
Gracias, un beso,
Richy

Rosa

Super, eres un cielo!! :-)

Gem@

!!Te ha quedado muy chulo¡¡ le estás dando un cambio poco a poco pero vaya cambio amiga ;)

Rosa

Gracias Gem@!
No me decido a meterme con una plantilla "prefabricada" me gusta más lo manual (lo siento por Fernando)
;-) ya me entiendes...

Gem@

Pensamos igual, me quedo con lo personalizado y lamento que no llueva a gusto de todos.
Yo también quiero darle un cambio pero a las pestañas, al final le daré rimel y poco más ;)

El Angel

Buenas noches, es la primera vez que escribo aqui, primero que nada muy lindo y muy util tu blog, muchas gracias,mi blog esta vacio aun jeje, tengo una consulta que te agradeceria muchisimo si me pudieras ayudar
es la siguiente
quiero poner una imagen de fondo en el blog, pero que figure solo en los costados, cuando pongo con los cogidos que das, sale la imagen deseada pero en completamente todo el blog, osea debajo de todas las estradas, en la sidebar tambien, he viste algunos blog que tienen solamente fondo en los costados, y lo demas con negro de fondo nomas, espero que me entiendas a lo que me refiero...
un abrazo y gracias nuevamente por la gran ayuda que siempre aportas.
Buenas noches y dulces sueños

Rosa

Hola elAngel! Pues claro que te entiendo...Mira todo depende de la imagen que vayas a colocar. En esos blog que dices, lo normal es que sea una imagen ya hecha con el dibujo en los costados y el fondo negro ¿me explico? La imagen SI ocupa todo el blog, solo que la parte central es de color negro y da la impresión de que es el fondo original del blog.
También puede ponerse solo una imagen más pequeña a un costado, pero no a los dos, en fin, se podrían intentar varias cosas según la imagen...
He hecho una prueba con una imagen de fondo negro, como verás cubre el dibujo ambos costados, con una ligera variación en el código se puede hacer que solo cubra el izquierdo, por ejemplo.
La imagen la he sacado de:
http://orbita.starmedia.com/~fondosweb/laterales/index-ar.html

Puedes ver como queda en mi prueba aquí:
http://pruebasnadamas-rosa.blogspot.com/

Si es algo así lo que quieres, quizas podrías mandarme al email tu imagen para hacer pruebas, si no es de fondo negro tranquilo, intentaré adaptarla y si algo consigo te mando las instrucciones a tu correo ¿ok?

El Angel

Buenos dias rosa =) gracias por responder tan rapido
ahora ya entiendo jeje no entendia del todo y me cansaba de modificar mi planilla sin resultados deseados =P
Sos una experta =) felicidades y gracias de nuevo.
Esta muy bien, con esos datos mas que suficiente para mi, sino sacare el molde de los fondos negros ya armados en esa pagina, y adaptare mi imagen a ellos (con photoshop), y listo =P.
ya lo hare cuando tenga un tiempito.
un abrazo y hasta pronto

Rosa

OK, Angel, si dominas el photoshop no creo tengas problema.
¡Un saludo!

El Angel

Perfecto! =)
http://elangellunar.blogspot.com
tal como lo deseaba,
Gracias!, me ha servido de bastante ayuda tu blog, y de seguro lo seguire utilizando ya que tengo que ver como hacerlo un poquito mas rapido, tal vez quitando algunas cosas innecesarias, no lo se , ya vere =P
saludos Rosa

Rosa

EL Angel, lo he visto y también he notado que la imagen no cubre todo el blog, a la derecha hay un espacio vacio (blanco) que si me permites la opinión, lo afea bastante.

Te doy alguna sugerencia, si no te importa...Mira tu código es este:
body {
background: url(http://img338.imageshack.us/img338/9827/fondobz9.jpg);
background-repeat: repeat-y;

- Si eliminas background-repeat: repeat-y; las estrellas se verán a ambos lados y llenarán el espacio blanco de la derecha.

- Si no quieres estrellas a ambos lados, pero si rellenar el hueco blanco, añade esto antes de la url de la imagen y ese hueco se verá en negro como el resto:
body {
background:#000 url(http://img338.imageshack.us/img338/9827/fondobz9.jpg);
background-repeat: repeat-y;


- Un efecto muy lindo es que la imagen (estrellas) se queden fijas mientras la página sube o baja (scroll), esto lo consigues añadiendo una línea al código:

body {
background:#000 url(http://img338.imageshack.us/img338/9827/fondobz9.jpg);
background-repeat: repeat-y;
background-attachment: fixed;

¡Suerte y perdona mi atrevimiento!

El Angel

Esta bien Rosa, no es atrevimiento de tu parte ni nada similar, al contrario, gracias por la ayuda "extra" =).
Vos sabes que no me figura el espacio en blanco que me dices, yo siempre uso firefox, tal vez se vea con el IE, pero he puesto los codigos por las dudas =P y muy lindo quedo con ese efecto estatico de las estrellas, me he fijado y, me figura unas lineas en el fondo, como de color bordo, jaja ya tratare de solucionarlo, metiendo mano se aprende dicen (y guardando la plantilla antes claro), pense que era mas sencillo que quede una imagen de fondo, pero de todas formas no ha sido tan complicado como en otras modificaciones.
Gracias nuevamente y gracias por dedicarle tu tiempo a mi blog.

Fernando

hace mucho tiempo q llevo tratando d hacer s truco y no puedo.
Q hago para lograr un efecto parecido al suyo?
No entiendo

Fernando

abajo de
body { pongo
background-attachment: fixed;
despues tengo
background:$bgcolor;
n ste ultimo pongo la url del fondo?
No entiendo nada

Fernando

encontre ste sitio para bajar fondos
http://www.grsites.com/webgraphics/
pero sigo sin poder.
No entiendo nada
donde pongo que?

Rosa

Fernando, has de ponerla a continuación del background que ya tienes, así:

body {
background-attachment: fixed;
background:$bgcolor url(Aqui_la_url_de_la_imagen);

Fernando

Rosa
El fondo ya lo pude poner lo q no sale s el efecto
Que hago?

Fernando

Es x demas el efecto no queda.
yo pense q poniendo
background-attachment: fixed;
y despues escoger el color de fondo en fuentes y colores el efecto quedaria pero no
ya he probado con varios fondos y no queda
Tengo la plantilla minima y nada

Rosa

Fernando, se coloca un fondo con una imagen en el background:

background:$bgcolor url(Aqui_la_url_de_la_imagen);

Y justo debajo añadimos la línea para que la imagen se vea fija cuando hacemos scroll (subir y bajar la página):

background-attachment: fixed;

Funciona, porque yo lo tengo así en El Escaparate.

Fernando

de q sitio saco usted su fondo?
encontres estos 2 sitios
http://www.glitter-graphics.com/
y este
http://www.grsites.com/webgraphics/
todos los fondos estan increibles pero ninguno me ha convencido

Katulu

perfecto! muchas gracias por tu trabajo.

una cuestion lo del background fijo es sencillo, pero ¿como puedo fijar la sidebar y la cabecera para que lo unico que suba y baje sea el contenido (los posts)?

Gracias por adelantado

Rosa

Katulu, eso no puede hacerse que yo sepa al menos.

Lágrima

hola es la primera vez que entro
qeria preguntarte si sabes como sacar la barra nabvar, vi que en otros blogs no la tienen y yo quiero sacarla y no se como
ayudamee :( soy nueva en esto :S...
besos..

Lágrima

ya pude sacarla :D
me gustaria saber tu opinion hacerca de mi blog... si te parece que hay algo que quede maal y como podria arreglarlo!...
gracias y muy bueno tu blog :)

Rosa

Lágrima, pues ya que lo dices...he visto que la imagen de la cabecera se te sale a la derecha...

Eso podrías arreglarlo si vas a Diseño y en el editar del header vuelves a cargar la imagen, pero marcando la casilla reducir hasta 660px.

Una vez cambiado su tamaño, aún se saldrá un poquito, pero puedes arreglarlo dentro del código de la plantilla en:

#header-wrapper {
width:660px;

Poniendo 670px en lugar de 660px.

lagrima

gracias, intente lo que me dijiste y creo que salió
pero me gustaria saber si se puede que me ocupe toda la pagina sin que se valla para la derecha se entendio?..
no qiero que tenga margen que no queden espacios blancos al costado d la imagen, como puedo hacer?:S:S

Rosa

lagrima, no, no entendí ¿de que imagen hablas? del fondo del blog o de la cabecera?

Lágrima

la de cabecera..
en este blog aparece como yo qiero que me quede
sin espacios en blanco a los costados y arriva.
la imagen (de cabecera) es del mismo tamáño que la pagina. nose como explicarlo bien..

Rosa

Lágrima, veo que has vuelto a cambiar de plantilla...

Guille

Hola! Veo que aquí das algunas indicaciones sobre cabeceras de blog, quería hacerte una consulta a ver si me podés ayudar. Yo quiero en mi cabecera una imagen que cubra toda la parte de arriba del blog (como tiene el tuyo) . Entiendo que el largo de la página es de 760px, el tema es que si pongo una imagen de esa longitud, no me cubre todo el ancho del blog, sino solo un pedazito y me queda mucho espacio libre a la derecha de la cabecera. Si le pongo una imagen más larga (como lo tengo ahora) en algunas computadoras se ve mas o menos bien bien, pero en otras (no se de que depende) se ve una imagen de cabecera muy larga, mucho mas larga que el resto del cuerpo del blog. Si podés ayudarme me vendría bien, sino gracias de todos modos

Guille
Este comentario ha sido eliminado por el autor.
Rosa

Guille, mi cabecera mide 740px más o menos.
En realidad la cabecera de mi blog es una imagen normal donde está incluido el texto (el escaparate) y las margaritas.
Lo que ves que ocupa toda la pantalla es otra imagen lisa del mismo color que el fondo de la del header, pero está aplicada como fondo de página en body{ de esta manera:

body {background: #FFFFFF url(Url de tu imagen) repeat-x;

Ese repeat-x hace que la imagen de color liso (que mide 50px de ancho y 175px de alto) se expanda solo en horizontal, ocupando todo el ancho de la pantalla.

Global Metion Blog

Rosa como estas? recibe un cordial saludo de parte de tus amigos, te quiero pedir un favor por cierto lo hago aquí par que tú no te sientas incomoda y respondas honestamente.

queria pedirte que me linkees, pues yo tengo tu botón, y en amigos.porque creo que tu blog es el mejor en su categorí y sería un enorme plcer para mi y mi equipo que nos agreges espero tu prota, respuesta.

Cómo te dije, responde sinceramente y lo hisé aquí para no molestarte.
Buenas Noches
saludos-sabia de blogger

Rosa

Global Si te soy sincera, no me gusta cuando me piden intercambio de enlaces.
Yo nunca lo hago, si alguien tiene a bien enlazarme, es porque así lo decide.
Si quieres un consejo, no andes pidiendo este tipo de favores, pues la mayoría te dirán que no y si te enlazan, probablemente lo harán por compromiso. Deberías intentar frecuentar otros blogs del tipo del tuyo y comentar, hacer una especie de red de blogs amigos, sin pedir nada a cambio un día te darás cuenta que quien menos esperas te ha enlazado.

Todos los blogs que están entre mis enlaces, están ahí por diferentes razones, pero ninguno me lo ha pedido expresamente.

Global Metion Blog

GRACIAS ROSA ME GUSTA TU SINCERIDAD, PERO SOLAMENTE TENGO AMISTAD CON UN BLOG DE MI CLASE LOS OTORS SON UNOS AMARGOS. y si a mi me piden casi a diario eso pero ubo una vez una que me dejaba 20 enlaces era molesto..pero eso no es el punto gracias

rodri

Nunca es tarde para aprender, menos para comentar, me sirvio. Muchas gracias

Rosa

rodriNunca es tarde para nada... hablando de aprender :D
¡Gracias!

Lesent

cual es el tamaño recomendable al que debe quedar un background que va a estar fijo?

Rosa

Lesent No depende de su tamaño, incluso puede usarse una imagen de 10 pixeles o menos, siempre que le ordenes se repita hasta cubrir el fondo... el fixed, fija la imagen para que no suba y baje con el scroll...

Publicar un comentario en la entrada

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S