Je bute à mettre en ligne des images.
- Auteur de la discussion ManuMaz
- Date de début
WRInaute accro
Bonjour index.html est une page web, pas un fichier image
Bonjour,
oui excusez moi je me suis trompé dans le lien. voilà la page
Code:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<title>Bonjour tout le monde !</title>
</head>
<body>
<div>
<p>p inutile pour le moment</p>
<img src="./image/lumiere-et-art.jpg" alt="image de fond"
width="690" height="334" />
</div>
</body>
</html>WRInaute accro
L'url de l'image est fausse, quand on cherche à afficher -https://www.lumiere-et-art.fr/image/lumiere-et-art.jpg on a une 404
WRInaute accro
On l'a tous faite 
Bonsoir,
je suis à la recherche de comment mettre une image en fond d'écran, ce que je tente ne fonctionne pas.
je suis à la recherche de comment mettre une image en fond d'écran, ce que je tente ne fonctionne pas.
Code:
dans l'entête :
.imagedefond {
background-color: grey;
background-size: cover;
background-position: center;
background-image: url("https://lumiere-et-art.fr/images/haute-definition/lumiere-et-art.jpg")
}
et dans le corps :
class="imagedefond"
Dernière édition:
WRInaute accro
La feuille de style est chargée ? Ou bien le code entre les balises style.
Exemple :
Et pour l'appel de la class
Exemple :
Code:
<style>
.imagedefond {
background-color: grey;
background-size: cover;
background-position: center;
background-image: url("https://lumiere-et-art.fr/images/haute-definition/lumiere-et-art.jpg");
width: 100%;
height: 400px; <= pour l'exemple
}
</style>Et pour l'appel de la class
Code:
<div class="imagedefond">
ton contenu
</div>bonjour,
merci d'avoir répondu, je ne sais pas quoi mettre quand tu écris "ton contenu"
Oui dans head j'ai bien mis dans la balise style.
Dans le corps je l'avais mis dans le body et après dans la div, ni l'un ni l'autre ne fonctionne :-(
Elle ne se développe pas dans toute la page et par exemple j'ai mis une balise <p> elle fait remonter l'image et apparait sur un fond blanc.
l'adresse -http://www.lumiere-et-art.fr/images/haute-definition/lumiere-et-art.jpg
merci d'avoir répondu, je ne sais pas quoi mettre quand tu écris "ton contenu"
Oui dans head j'ai bien mis dans la balise style.
Dans le corps je l'avais mis dans le body et après dans la div, ni l'un ni l'autre ne fonctionne :-(
Elle ne se développe pas dans toute la page et par exemple j'ai mis une balise <p> elle fait remonter l'image et apparait sur un fond blanc.
l'adresse -http://www.lumiere-et-art.fr/images/haute-definition/lumiere-et-art.jpg
WRInaute accro
1/ Ton image fait 2.31 Mo.
2/ Je ne vois nul part trace d'un quelconque code qui appelle une feuille de style sur ton site.
3/ Tu appelles charset=iso-8859-1 et ensuite UTF-8.
4/ L'exemple de l'image que tu me donne est en http et chrome n'aime plus trop le mixed content.
2/ Je ne vois nul part trace d'un quelconque code qui appelle une feuille de style sur ton site.
3/ Tu appelles charset=iso-8859-1 et ensuite UTF-8.
4/ L'exemple de l'image que tu me donne est en http et chrome n'aime plus trop le mixed content.
1/ oui l'image est encore brut, il faut que je l'a retaille.
2/ je n'ai pas encore de page CSS, pour l'instant je l'inclus par le <head>
3/ sans doute un vieux réflexe ça fait plus de 10ans que j'ai pas touché à un site iso-8859-15 ?
4/ tu veux dire que je supprime http et à la place ./images... ? en fait non c juste une erreur de frappe
Dernière édition:
Code:
<html lang="fr">
<head>
<meta http-equiv="content-Type" content="text/html; charset=iso-8859-15"/>
<meta charset="UTF-8" />
<title>Lumiere et Art</title>
<link rel="shortcut icon" sizes="16x16" type="/img_site/favicon-16x16.png" href="/images/img_site/favicon-16x16.png"/>
<style>
.imagedefond {
background-color: grey;
background-size: cover;
background-position: center;
background-image: url("https://www.lumiere-et-art.fr/images/haute-definition/lumiere-et-art.jpg")
width: 99%;
height: 99%;
}
</styleJe l'ai peut être pas fait correctement à l'époque c'était CSS1 et maintenant je crois qu'il en est à CSS3
Dernière édition:
Oui c normal c une ancienne tentative de mettre une image de fond en html dans le body. Maintenant j'essaie de la mettre en ligne avec du code CSS injecté dans le head>
La feuille de style viendra après quand il faudra tout mettre en place (body h* div ul...)
Là c'est juste un test.
Je cherche aussi qu'elle est le mieux entre entre UTF-8 ou bien 8859-15
Bonjour,
j'ai avancé depuis hier, c'est pas encore ça mais on s'en approche.
quand je valide par le W3C comme ci-dessous :
il me met aucune erreur.
Par contre si j'utilise :
il me met des erreurs, lequel croire ?
peu importe le correcteur, l'image de fond n'ai pas bien prise en charge. L'image que se soit sur un petit ou grand écrans il rogne l'image soit en hauteur soit en largeur ???
pour ce qui concerne l'encodage 8859,15 ou UTF-8 j'ai opté pour l'UTF-8 j'espère que c le bon choix.
Voilà l'entête corrigé en grande partie
j'ai avancé depuis hier, c'est pas encore ça mais on s'en approche.
quand je valide par le W3C comme ci-dessous :
Code:
-https://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Fwww.lumiere-et-art.fr%2F&profile=css3svg&usermedium=all&warning=1&vextwarning=&lang=frPar contre si j'utilise :
Code:
-https://validator.w3.org/nu/?showsource=yes&checkerrorpages=yes&useragent=Validator.nu%2FLV+https%3A%2F%2Fvalidator.w3.org%2Fservices&acceptlanguage=&doc=https%3A%2F%2Fwww.lumiere-et-art.fr%2Fpeu importe le correcteur, l'image de fond n'ai pas bien prise en charge. L'image que se soit sur un petit ou grand écrans il rogne l'image soit en hauteur soit en largeur ???
pour ce qui concerne l'encodage 8859,15 ou UTF-8 j'ai opté pour l'UTF-8 j'espère que c le bon choix.
Voilà l'entête corrigé en grande partie
Code:
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Lumiere et Art</title>
<meta http-equiv="content-Type" content="text/html; charset=utf-8">
<link rel="shortcut icon" sizes="16x16" type="/images/img_site/favicon-16x16.png" href="/images/img_site/favicon-16x16.png">
<style type="text/css">
.imagedefond {
background-image: url("/images/haute-definition/lumiere-et-art.jpg");
background-color: #581845;
width: 99%;
height: 99%;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
</head>WRInaute accro
background-size: cover; force la taille de l'image pour couvrir la totalité de l'écran, si la taille de l'image n'est pas proportionnelle à celle de l'écran, c'est normal qu'elle soit rognée
WRInaute accro
Oui, parce que ton image n'est pas adaptée, 2502 x 1897px c'est énorme. Pense "dimensions écran" et "proportion"
WRInaute occasionnel
Bonjour,
Site très pratique pour alléger les images : https://compress-or-die.com/
Site très pratique pour alléger les images : https://compress-or-die.com/
WRInaute accro
paint.net est gratuit
Bonjour,
merci pour votre aide, cthierry pomination et Marie-Aude, encore une bonne chose de faite pour le fond.
Il y a encore une peu de taf à effectuer.
J'ai cette erreur quand je valide la page dans le W3C
merci pour votre aide, cthierry pomination et Marie-Aude, encore une bonne chose de faite pour le fond.
Code:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<link rel="shortcut icon" sizes="16x16" type="/images/img_site/favicon-16x16.png" href="/images/img_site/favicon-16x16.png" />
<title>Lumière et Art en tableaux et photographies</title>
<meta name=”description” content=”Lumière et Art expose des créations de Maz, vos oeuvres, des tableaux et photos. Il est disponible aux novices pour se faire connaître ou conseiller, aux plus aguérris qui souhaitent une visibilité”>
<style type="text/css">
.imagedefond {
background-image: url("/images/moyenne-definition/lumiere-et-art-legere.jpg");
background-color: #581845;
width: 99%;
height: 99%;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
<style type="text/css">
p {
font-size: 99%;
color: white;
}
</style>
</headIl y a encore une peu de taf à effectuer.
J'ai cette erreur quand je valide la page dans le W3C
Code:
Bad value /images/img_site/favicon-16x16.png for attribute type on element link: Expected a token character but saw / instead.
From line 5, column 5; to line 5, column 130WRInaute occasionnel
L'attribut Type ne doit pas contenir l'URL (ça c'est l'attribut href) mais le format d'image, "image/png" dans le cas présent
Merci ça avance petit à petit mais sûrement.
➡️ Offre MyRankingMetrics ⬅️
pré-audit SEO gratuit avec RM Tech (+ avis d'expert)
coaching offert aux clients (avec Olivier Duffez ou Fabien Faceries)
Voir les détails ici
Discussions similaires
