Calage d'images
Résolu
Sunglasses
Messages postés
112
Date d'inscription
Statut
Membre
Dernière intervention
-
s.spark Messages postés 2485 Date d'inscription Statut Contributeur Dernière intervention -
s.spark Messages postés 2485 Date d'inscription Statut Contributeur Dernière intervention -
Bonjour,
Ma question doit être sûrement très bête, mais bon, je ne suis pas très calée dans ce domaine-là, donc je fais appel aux plus expérimentés.
Voilà, je suis en plein création d'un site, composé uniquement d'images.
Pour ma page d'accueil, je souhaite avoir un fond (un tout petit motif que je met en repeat pour qu'il soit répété autant de fois que le nécessite la résolution de l'écran du visiteur) et une image en plein centre (enregistrée en PNG car besoin de la transparence)
Voilà un aperçu, avec Photoshop, de ce à quoi je voudrais arriver :
http://i9.photobucket.com/albums/a64/Miss_Airplane_Girl/prototype.jpg
Donc, pour le fond (rayé marron), j'utilise un tout petit motif que je met en repeat de cette façon :
De cette façon, mon petit motif est répété pour former ce "papier peint" rayé marron.
Seulement, par la suite, je ne sais absolument pas comment insérer l'image du bar, qu'elle soit en plein milieu de la page, quel que soit la résolution d'écran...
Quelqu'un saurait-il quel(s) code(s) HTML ou CSS je dois ajouter après celui que j'ai commencé ?
Je vous remercie d'avance, voilà un moment que je bosse sur ce site, et j'aimerais en venir à bout !
Ma question doit être sûrement très bête, mais bon, je ne suis pas très calée dans ce domaine-là, donc je fais appel aux plus expérimentés.
Voilà, je suis en plein création d'un site, composé uniquement d'images.
Pour ma page d'accueil, je souhaite avoir un fond (un tout petit motif que je met en repeat pour qu'il soit répété autant de fois que le nécessite la résolution de l'écran du visiteur) et une image en plein centre (enregistrée en PNG car besoin de la transparence)
Voilà un aperçu, avec Photoshop, de ce à quoi je voudrais arriver :
http://i9.photobucket.com/albums/a64/Miss_Airplane_Girl/prototype.jpg
Donc, pour le fond (rayé marron), j'utilise un tout petit motif que je met en repeat de cette façon :
<html lang="fr">
<head>
<title>Test</title>
<style type="text/css">
body {background: url(images/background.jpg) left repeat-x-y;}
De cette façon, mon petit motif est répété pour former ce "papier peint" rayé marron.
Seulement, par la suite, je ne sais absolument pas comment insérer l'image du bar, qu'elle soit en plein milieu de la page, quel que soit la résolution d'écran...
Quelqu'un saurait-il quel(s) code(s) HTML ou CSS je dois ajouter après celui que j'ai commencé ?
Je vous remercie d'avance, voilà un moment que je bosse sur ce site, et j'aimerais en venir à bout !
A voir également:
- Calage d'images
- Des images - Guide
- Extraire images pdf - Guide
- Images enregistrées - Forum Bureautique
- Recherche images - Guide
- 4 images 1 mot niveau 10 chaperon rouge ✓ - Forum Jeux vidéo
1 réponse
Salut,
Tu peux créer un conteneur qui aura ton image en background.
Tu vas avoir des problème avec Internet Explorer 6, il ne gère pas bien la transparence des PNG, ça sera plutôt gris. Pour palier à ce problème il existe ce que l'on appel des hack IE, mais là je l'ai pas IE 6.
Tu peux créer un conteneur qui aura ton image en background.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Prototype</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Description" content="Ceci est un site de ..." />
<meta name="keywords" content="design, graphisme, ..." />
<style type="text/css">
body {
background: url(images/background.jpg) repeat;
}
div#bar {
background: url(images/bar.jpg) no-repeat center;
weigth:500px ;
height:400px
}
</style>
</head>
<body>
<div id="bar"></div>
</body>
</html>
Tu vas avoir des problème avec Internet Explorer 6, il ne gère pas bien la transparence des PNG, ça sera plutôt gris. Pour palier à ce problème il existe ce que l'on appel des hack IE, mais là je l'ai pas IE 6.
Merci !