iMeil NewsLetter - Marketing global

Establecimiento de fondos con CSS

GregPor: Greg Alvarez
iMeil.com.mx
Abril 11, 2012

Compártelo:   Comparte en Facebook Comparte en Twitter Comparte en LinkedIn

Establecimiento de fondos con CSS Son dos los modos en que suelen aplicarse fondos: para la página y para una sección específica.

En este artículo presentaré cómo aplicar un fondo para la página y uno para un formulario web.

Requerirás descargar dos imágenes que he generado, las cuales se encuentran abajo con el link de descarga respectivo.

Fondo para la página

Para este ejemplo, he elaborado una imagen a ser utilizada y que puedes descargar.

Nuestra página no tendrá nada, por lo que nuestro código deberá lucir como el siguiente:
<?xml version="1.0" encoding="utf-8"?>
<!doctype html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Fondo de página con CSS</title>
    <link rel="stylesheet" type="text/css" href="general.css">
</head>
<body>
Hola </body>
</html>
En el archivo general.css es donde colocaremos todo lo necesario para que se muestre el fondo que has descargado.

El código CSS a implementar es el siguiente:
body {
    background:url(/bgC.jpg) top left no-repeat;
    background-color: #babaa8;
    }
El código en negritas significa que estás indicando que la imagen debe alinearse en la parte superior izquierda y no repetirse.

El código hexadecimal especificado en background-color:, es para indicar que se muestre un color de fondo, el cual aparecerá en caso de presentarse problemas con la imagen (como que demore en cargar). Este color suele ser uno que sea similar a la imagen que estableces como fondo, pues es muy útil cuando los contenidos de tus páginas rebasan la altura de la imagen utilizada.

Y eso es todo, has aprendido a cómo modificar y establecer un fondo diferente para tu sitio web.

Como podrás notar, el código presentado sólo debes agregarlo a la etiqueta body sin tener que generar una específica para ello.

Fondo para formulario

Para este ejemplo utilizaremos la imagen que el sitio de iMeil presentará en su próxima actualización. Descárgala para poder utilizarla.

Primero colocamos nuestro código HTML para el formulario:
<form action="unScriptAqui" method="post">
    Nombre<br /> <input class="textos" type="text" name="nombre"><br />
    Email<br /> <input class="textos" type="text" name="email"><br />
    <input type="hidden" value="Enviar"> <input type="submit" value="Enviar"><br /><br />
</form>
Como podrás observar, dentro del archivo general.css, se generará una nueva regla a la cual se le ha asignado el nombre de selector "textos".

Además, se implementará el código CSS respectivo para el selector form, a fin de formatear el texto que aparece (Nombre, Email) en el formulario. Si remueves este selector (form), notarás cómo cambia el texto.

El código CSS final que debemos tener es el siguiente:
body {
    background:url(/bgC.jpg) top left no-repeat;
    background-color: #babaa8;
    }

form {
    font:normal 12px arial,verdana;
    color:#333;
    }

.textos {
    padding:0 0 0 8px;
    margin:0 0 0 10px;
    color:#333;
    height:16px;
    background:url(/formas.png) no-repeat;
    background-color:transparent;
    border:0;
    font:normal 11px arial,verdana;
    width:145px;
    }
Nota el código en negritas. Se indica que la imagen debe presentarse como transparente. Es una imagen PNG y éstas son excelentes para utilizar los fondos transparentes, por lo cual debes especificarlo en el código CSS para evitar que las zonas transparentes de la imagen sean rellenadas con color blanco.

Y nuestro código HTML, para los dos ejemplos aquí presentados, debe ser el siguiente:
<?xml version="1.0" encoding="utf-8"?>
<!doctype html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Fondo de página con CSS</title>
    <link rel="stylesheet" type="text/css" href="general.css">
</head>
<body>
<form action="unScriptAqui" method="post">
    Nombre<br /> <input class="textos" type="text" name="nombre"><br />
    Email<br /> <input class="textos" type="text" name="email"><br />
    <input type="hidden" value="Enviar"> <input type="submit" value="Enviar"><br /><br />
</form>
</body>
</html>
Recuerda: sólo realizando pruebas se puede lograr innovar y conocer más a fondo las cosas. ¿Dudas o comentarios?

Lee lo que se opina sobre el tema

Comentario:
Nombre*:
Email*: