Dea ao teu sitio un interese visual con gráficos de fondo
As imaxes son unha parte importante dos deseños atractivos do sitio web. Isto inclúe o uso de imaxes de fondo. Estas son as imaxes e os gráficos que se usan detrás das áreas dunha páxina fronte ás imaxes que se presentan como parte das páxinas de contido. Estas imaxes de fondo poden engadir interese visual a unha páxina e axudarlle a acadar o deseño visual que pode estar buscando nunha páxina.
Se comezar a traballar con imaxes de fondo, sen dúbida, executarase no escenario onde desexa estirar unha imaxe para que se axuste á páxina.
Isto é especialmente certo para sitios web responsivos que están sendo entregados a unha gran variedade de dispositivos e tamaños de pantalla .
Este desexo de estirar unha imaxe de fondo é un desexo moi común para os diseñadores web porque non todas as imaxes encaixan no espazo dun sitio web. No canto de configurar un tamaño fixo, estirar a imaxe permítelle flexionar para axustar a páxina sen importar o ancho ou estreito que sexa a ventá do navegador .
A mellor forma de estirar unha imaxe para axustar o fondo dunha páxina é usar a propiedade CSS3 para o tamaño do fondo. Aquí tes un exemplo que usa unha imaxe de fondo para o corpo dunha páxina e que establece o tamaño nun 100% para que se estire sempre para axustarse á pantalla.
corpo {
background: url (bgimage.jpg) non-repeat;
tamaño de fondo: 100%;
}
Segundo caniuse.com, esta propiedade funciona en IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+ e en todos os principais navegadores móbiles. Isto cobre todos os navegadores modernos dispoñibles hoxe, o que significa que debes usar esta propiedade sen medo de que non funcione na pantalla de alguén.
Falso dun fondo estendido nos navegadores máis antigos
É moi improbable que teñas que soportar os navegadores máis antigos que IE9, pero supoñamos que estás preocupado porque o IE8 non admite esta propiedade. Nese caso, pode falsear un fondo estirado. E pode usar os prefixos do navegador para Firefox 3.6 (-moz-background-size) e Opera 10.0 (-o-background-size).
A forma máis sinxela de falsificar unha imaxe de fondo estendida é estendela por toda a páxina. A continuación, non acaba con espazo extra nin ten que preocuparse de que o texto se axuste á área estirada. Vexa como facelo:
id = "bg" />
- En primeiro lugar, asegúrese de que todos os navegadores teñan unha altura do 100%, 0 marxes e 0 rellenos nos elementos CORPO e HTML. Sitúe o seguinte na cabeza do seu documento HTML:
- Engada a imaxe que desexa ser o fondo como o primeiro elemento da páxina web e dálle o nome de "bg":
- Coloque a imaxe de fondo para que se fixa na parte superior e esquerda e ten un 100% de ancho e un 100% de alto. Engade isto á túa folla de estilo:
img # bg {
posición: fixa;
arriba: 0;
esquerda: 0;
ancho: 100%;
altura: 100%;
} - Engade todo o contido á páxina dentro dun elemento DIV cunha identificación de "contido". Engade o DIV debaixo da imaxe:
Nota: é interesante mirar agora a túa páxina. A imaxe debería mostrar estendida, pero o teu contido está completamente ausente. Por que? Debido a que a imaxe de fondo é 100% de alto e a división de contido é despois da imaxe no fluxo do documento, a maioría dos navegadores non a mostrarán.Todo o teu contido aquí, incluídos os encabezados, parágrafos, etc.
- Sitúe o seu contido de forma que sexa relativo e ten un índice z de 1. Isto traerase por riba da imaxe de fondo en navegadores compatibles con estándares. Engade isto á túa folla de estilo:
#contenido {
posición: relativa;
z-index: 1;
}
- Pero non está feito. Internet Explorer 6 non cumpre os estándares e aínda ten algúns problemas. Hai moitas maneiras de ocultar o CSS de todos os navegadores, pero IE6, pero o máis sinxelo (e menos propensos a provocar outros problemas) é usar comentarios condicionais. Pon o seguinte despois da súa folla de estilo no encabezado do documento:
- Dentro do comentario destacado, engade outra folla de estilo con algúns estilos para que o IE 6 teña un bo aspecto:
- Asegúrese de probar tamén en IE 7 e IE 8. Pode ter que axustar os comentarios para soportalos tamén. Con todo, funcionou cando o probei.
Aceptar: esta é a verdade. Poucos sitios teñen que soportar IE 7 ou 8 máis, e moito menos IE6.
Como tal, este enfoque está anticuado e probablemente innecesario para ti. Deixo aquí máis como un modelo de curiosidade en canto a cousas moito máis difíciles antes de que todos os nosos navegadores xogasen tan ben xuntos.
Falso dunha imaxe de fondo estendido nun espazo máis pequeno
Podes usar unha técnica similar para falsificar unha imaxe de fondo estendida a través dun DIV ou outro elemento na túa páxina web. Isto é un pouco máis complicado xa que ten que usar o posicionamento absoluto ou ter problemas de espazamento estraños noutras partes da túa páxina.
- Coloca a imaxe na páxina que quero usar como fondo.
- Na folla de estilo, configure un ancho e alto para a imaxe. Teña en conta que pode usar porcentaxes para ancho ou alto, pero creo que é máis doado axustarse cos valores de lonxitude para o alto.
img # bg {
ancho: 20em;
altura: 30em;
} - Coloca o teu contido nunha div co id "contido" como fixemos anteriormente:
Todo o teu contido aquí
- Estilo o contido div para ser o mesmo ancho e alto que a imaxe de fondo:
div # contido {
ancho: 20em;
altura: 30em;
} - A continuación, coloque o contido ata a mesma altura que a imaxe. Entón, se a túa imaxe é de 30 anos, terías un estilo superior: -30em; Non esqueza poñer un índice z de 1 sobre o contido.
#contenido {
posición: relativa;
top: -30em;
z-index: 1;
ancho: 20em;
altura: 30em;
} - A continuación, engade un índice z de -1 para usuarios de IE 6, como fixeches anteriormente:
Unha vez máis, con tamaños de fondo que gozan do amplo soporte do navegador que fai agora, esta visión tamén é moi probable que sexa innecesaria e presentada como produto dunha época pasada. Se queres usar este enfoque, asegúrate de probar isto en tantos navegadores como poidas.
E se o teu contido cambia de tamaño, necesitarás cambiar o tamaño do teu contedor e imaxe de fondo, se non, acabarás con resultados estraños.