Cómo poner una imagen de fondo en Tumblr

Personalizar tu Tumblr con tu propia imagen de fondo parece difícil, sobre todo si no sabes HTML o CSS. Pero aquí te decimos paso a paso cómo hacerlo.

Close
Drag

Personalizar tu Tumblr con tu propia imagen de fondo parece costoso, sobre todo si no sabes nada de HTML o CSS. Te contamos cómo modificar tu tema paso a paso para añadir tu fotografía favorita.  

Para empezar a hacer estos cambios, ve a “Personalizar”, o “Customize”, arriba a la derecha. Se abrirá una ventana a la izquierda de la pantalla con opciones para modificar tu Tumblr.

tumblr_logo_white_blue_256.png

Lo primero que tienes que saber, es que algunos temas te ofrecen más opciones para personalizar tu fondo que otros. Si presionas “Buscar temas” verás una selección, pero también puedes descargar más en otras páginas web. Algunos te permiten modificar cada detalle fácilmente, pero en otros casos resulta más complicado.

Temas con fondo personalizable

Algunos temas, como el Effector Theme, te permiten subir una fotografía directamente desde tu computadora. Simplemente presiona el iconito de la cámara y elige tu imagen. El tamaño que verás en tu pantalla dependerá del tamaño original, así que si es una imagen pequeña, se repetirá a lo largo de la pantalla para cubrir todo el fondo.

Temas con fondo personalizable a través del HTML

Otros temas, como Showroom, no ofrecen un botón para subir tu fotografía directamente, pero puedes cambiar el fondo fácilmente editando el HTML.

Para ello, presiona Editar HTML a la izquierda, debajo del nombre del tema. Se abrirá una pantalla con el código del tema. Es muy importante que lo copies entero  -puedes utilizar las teclas Ctrl A (o Command A en Mac) para seleccionar todo- en un programa como Notepad o TextEdit, porque si cometes un error o quieres volver a la versión anterior a hacer los cambios. Recuerda salvarlo como texto sin formato, o “plain text”.

Presiona Ctrl f (o Command f) para abrir una ventana de búsqueda, y teclea:

               body {

Así deberías encontrar la parte del código que define el estilo del fondo.

Baja un poco y busca una línea de código con este aspecto:

               background: url(http://static.tumblr.com/ge74hdk/G3flw5yrs/wood_pattern.png);

La URL dentro del paréntesis es la que indica la imagen de fondo, y es esto lo que debes modificar. En principio podrías poner cualquier imagen colgada en internet, pero te recomiendo que esté en un lugar que puedas controlar, porque si simplemente la copias de una web, te podrías quedar sin imagen si el dueño de esa página decide cerrarla o retirar la foto. Una solución sencilla es, por ejemplo, crear una entrada en tu Tumblr y subir la foto allí.

Después, solo tendrás que copiar la URL de la imagen y sustituir la que aparece en la plantilla por la tuya. Empezará por http:// y terminará con una extensión de imagen como .jpg o .png.

Dale a “Actualizar vista previa” para ver el resultado antes de guardar.

Temas sin fondo personalizable a través del HTML

Muchos temas, como Lightweigth, no incluyen esta línea en el código, así que añadir una fotografía en el fondo es un poquito más complicado.

Para modificarlos tendrás que dar más pasos. Empieza igual que en el caso de los temas con fondo personalizable a través del HTML. Presiona “Editar HTML” y no olvides guardarlo antes de empezar a hacer cambios.

Presiona Ctrl f (o Command f) para abrir una ventana de búsqueda, y teclea de nuevo:

               body {

En este caso no verás

               background: url

En su lugar, verás algo parecido a esto:

               body { background: {color:Background}; }

Borra esta parte y escribe en su lugar:

                body {

background-image:url(PON_AQUI_LA_URL_DE_TU_IMAGEN);  

                }

background
       

Ahora, abre una nueva ventana de búsqueda y localiza esta línea:

               <meta name=

Verás varias líneas seguidas que empiezan por

               <meta name=

Añade esta al principio de la lista:

               <meta name=”image:Background” content=”“/>

meta

Ahora puedes hacer lo mismo que en el caso de los temas con fondo personalizable a través del HTML, y poner la dirección URL de tu imagen en el espacio entre paréntesis.

Dale a “Actualizar vista previa” para ver el resultado antes de guardar.

Modificar la imagen

Ahora tienes tu imagen de fondo, pero puede que no te guste cómo se ve. Tienes algunas opciones que puedes usar para modificar el aspecto de tu imagen, y solo tienes que añadirlas debajo de:

               body {

background-image:url(PON_AQUI_LA_URL_DE_TU_IMAGEN);  

               }

Aquí tienes algunas de las más habituales, y puedes combinarlas como te venga mejor.

Si quieres que la imagen se repita a lo largo del fondo, añade:

             background-repeat:repeat;

Si no quieres que la imagen se repita, añade:

             background-repeat:no-repeat;

Si quieres que la imagen se posicione arriba a la izquierda, o que la repetición de la imagen empiece arriba a la izquierda, añade:

             background-position:left top;

Arriba a la derecha:

             background-position:right top;

Abajo a la izquierda:

             background-position:left bottom;

Abajo a la derecha:

             background-position:right bottom;

En el centro:

             background-position:center;

En el centro y arriba:

             background-position:center top;

Si quieres que la imagen esté fija en el fondo, y no se desplace con el resto del contenido al hacer scroll (y te lo recomendamos, porque si no resulta demasiado confuso):

             background-attachment: fixed;

Si quieres que la imagen cubra todo el fondo (pero asegúrate de que tiene calidad suficiente o aparecerá pixelada):

             background-size:cover;

Si quieres que la imagen tenga un tamaño determinado (por ejemplo, 300 pixeles para que encaje bien en el fondo al repetirse):

             background-size:300px;

Aquí tienes unos ejemplos:

Imagen repetida a lo largo de la pantalla, fija y empezando arriba a la izquierda:

             body {

             background-image:url(http://24.media.tumblr.com/49a8ef5d056d5fc2b7c7092c0ac12210/tumblr_n4e9wfQMRL1tzaop5o1_400.jpg);

              background-repeat:repeat;

              background-attachment:fixed;

              background-position: left top;

              }

fondorepetido
 
fondorepetido pantalla

Imagen única en la esquina superior derecha:

               body {  

             background-image:url(http://24.media.tumblr.com/49a8ef5d056d5fc2b7c7092c0ac12210/tumblr_n4e9wfQMRL1tzaop5o1_400.jpg);

              background-repeat:no-repeat;

              background-attachment:fixed;

              background-position: right top;

              background-size:500px;

              }

logoderechaarriba
 
logoderechaarriba pantalla

Imagen única cubriendo todo el fondo:

              body {

              background-image:url(http://24.media.tumblr.com/c6d33501bc407ad3c0e850f5910c0fe7/tumblr_n1j18r2yvp1qlnszno1_500.jpg);

              background-repeat:no-repeat;

              background-attachment:fixed;

              background-position: center;

              background-size:cover;

              }

fondoentero
 
fondo completo

Ahora puedes experimentar con tus imágenes para ver cómo quedan mejor. Recuerda escoger colores para los textos que combinen con el fondo. Y si tienes dudas o comentarios, no dudes en escribirnos o mandarnos un tuit a @CNET_ES.