Scalable Contexte HTML CSS Javascript

Est-ce que quelqu'un connaît un moyen d'avoir une échelle d'image de fond aux dimensions de la fenêtre du navigateur dans lequel il se trouve? Je sais que CSS3 permet la largeur de fond, mais j'ai besoin de quelque chose de plus compatible.Scalable Contexte HTML CSS Javascript

Un grand merci,

Elliott

Source

2010-02-04 Elliott Bowles

1k doublons: http: //stackoverflow.com/search?q=stretch+background+css –

Vous ne pouvez pas le faire avec un background-image, car il ne prend pas en charge le dimensionnement. Vous devez faire semblant en plaçant une étiquette img qui s'étend à 100% dans les deux directions et la positionner derrière votre contenu en utilisant le positionnement absolu et z-index. Quelque chose comme cela devrait fonctionner:

<body> 
    <img class="bgimage" src="bgimage.jpg" /> 
    <div id="content"> 
     Your content here... 
    </div>

Et en CSS:

html, body { 
    min-height: 100%; 
} 

.bgimage { 
    position: absolute; 
    z-index: -1; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}

ai pas testé, mais qui devrait vous donner quelques entrées au moins.

Source

2010-02-04 14:36:02

Cela fonctionne génial! Je me suis débarrassé de la hauteur: 100% pour éviter l'étirement de l'image, et j'ai prévu d'ajouter un fondu au bas de la photo pour que l'espace ci-dessous ne me paraisse pas trop bizarre. Merci pour l'aide! –

est ici l'astuce (de http://css-tricks.com/how-to-resizeable-background-image/)

Définir l'image comme ceci:

<body id="page-body"> 
    <img class="source-image" src="images/image.jpg" alt="" /> 
</body>

et votre CSS comme ceci:

#img.source-image { 
    width: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 
body { 
    overflow: hidden; 
}

Source

2010-02-04 14:39:26 Keltex

Si vous envisagez d'avoir un écran très léger c'est bon.
Mais si vous envisagez d'utiliser une image comme arrière-plan pour une page bondée, voici quelques raisons que nous avons abandonné cette fonctionnalité:

Certains navigateurs ont un temps difficile à rendre rapide: la première fois, au cours les rediffusions et la redimensionnement de la fenêtre.
Pour chaque image, nous avons dû passer trop de temps à trouver un équilibre entre la taille du fichier et la définition de l'image. Ce n'est pas facile avec la base croissante d'utilisateurs avec de grands écrans.
Nous avons même essayé de charger d'abord une version basse résolution de l'image, pendant que la grande chargeait. Il a un effet très agréable, mais consomme encore plus de ressources navigateur

Une fois que nous avons abandonné l'image étirée, notre application a été rapide à nouveau et nous avons arrêté de tergiverser en jouant avec photo;)

Source

2010-02-04 16:23:01 Mic

le site en question est très rare sur le contenu, et il a semblé charger à un taux acceptable. Je pourrais voir comment cela ne serait pas pratique sur un grand site cependant. Merci pour les pointeurs! –

Répondre

Questions connexes