Images et mise en page dynamique

Question

Je travaille sur un site Web avec une mise en page basée sur em (pour pouvoir l'étirer et le compresser avec élégance lorsque les utilisateurs augmentent ou diminuent la taille de la police). Ce site a un en-tête qui devrait être affiché sur toutes les pages. J'ai un div « en-tête » dans toutes les pages et le fichier css l'ensemble du site comprend le code:

#header 
{ 
    width: 50em; 
    height: 6em; 
    margin-bottom: .5em; 
    background: url("/IMAGES/header.png"); 
} 

Le problème est que cela ne se détend pas vraiment avec élégance. Lorsque la taille du texte augmente, la hauteur et la largeur changent, mais ** l'image n'augmente pas en taille; il répète simplement *. *

Comment puis-je étirer et écraser l'image au lieu de la répéter ou de la couper? (J'aimerais avoir une solution basée sur css si possible ... J'ai déjà quelques idées html en magasin).

Answer 1

Il n'y a aucun moyen d'utiliser css pour étirer une image d'arrière-plan. Vous devez utiliser javascript ou quelque chose de similaire. Toutefois, si vous avez une image qui n'a pas besoin d'être répété (par exemple les mélanges dans l'arrière-plan), vous pouvez faire quelque chose comme ceci:

background-position: center center; 
background-repeat: no-repeat; 

Addendum: La position a le format suivant: < haut | centre | bas | xpos > < left | center | right | ypos > où xpos et ypos peuvent être donnés de façon régulière (em, px,%, etc ...).

Answer 2

La seule façon que j'ai jamais trouvé est:

• tâche de fond de #header à bgcolor de l'image d'en-tête.
• Placez le nouveau div intérieur #header
• l'image d'en-tête divisé en 2
• Set moitié gauche de la nouvelle image en arrière-plan #header aligné à gauche
• Set moitié droite de la nouvelle image comme arrière-plan # header.div de aligned-

Bien sûr, cela ne fonctionnera qu'avec des images appropriées.

Answer 3

Je suis sûr que vous ne pouvez pas changer la mise à l'échelle des images d'arrière-plan. Si votre fichier header.png était inclus en tant que tag img, vous pouviez définir sa hauteur et sa largeur comme étant ems et le navigateur le redimensionnerait (ce qui donne généralement l'impression que c'est de la merde). Rappelez-vous également que tous les navigateurs modernes font un zoom sur la page ces jours-ci, ce qui permet de tout mettre à l'échelle sans trop modifier votre mise en page. Peut-être dire à vos utilisateurs d'utiliser cette fonctionnalité?

Answer 4

@Pianosaurus, je pense que votre idée peut être la plus simple, bien que limitée. Simplement, ne pas étirer l'image, mais assurez-vous qu'elle est bien lorsqu'elle n'est pas étirée (centrez-la et ne la laissez pas se répéter). En outre, si vous utilisez une bonne quantité de remplissage sur les bords de votre image d'en-tête, le dimensionnement de la page ne causerait pas de gros problèmes non plus.