Sujet Précédent Sujet Suivant

Problème insertion d'image dans le CSS

Fermé
Forbag - 22 déc. 2021 à 20:46
 Matador - 29 déc. 2021 à 14:33
Bonjour,
Je bloque sur quelques choses de minime pour la création d'un site Web... En effet je ne comprend pas pourquoi cela ne fonctionne pas.
Je fais :

<img src="....." id ="test" />
Puis dans l'onglet CSS :
#test
}
position-y: 100%.,
Bottom : 90%.,...
.....
}
Ce sont des exemples parmi tant d'autre de balise mais rien ne change dans ma page Web...
AU niveau de l'image je précise car pour ce qui est de paragraphe ou autre cela fonctionne

Tenez, autre exemple

Body
{
Background-image : url("...")
.....
}
Même avec une image de fond cela ne fonctionne pas, j'ai essayé avec un lien où avec "image.png" ou ". Quelque chose" mais rien non plus.

Merci d'avance
A voir également:

2 réponses

Réponse 1 / 2
jee pee Messages postés 39655 Date d'inscription mercredi 2 mai 2007 Statut Modérateur Dernière intervention 27 avril 2024 9 238
Modifié le 22 déc. 2021 à 21:35
Bonjour,

Il faut que tu continues à suivre des exemples dans des tutos ;-)

Et il faut mettre tout ton code.

Par exemple cela fonctionne, mais il faut que l'image soit au même endroit que index.html et style.css 

body {
background-image : url("back.jpg");
} 
#banner1 {
background-color:black;
color:black;color:white;
} 


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>Premiers tests</title>
</head>
<body>
<div id="banner1">
<h1>Mon site web</h1>
<p>Lorem ipsum dolor sit amet. </p>
</div>
</body>
</html>


PS : Pour la mise en forme des sources, au dessus de la zone d'édition de tes messages, il y a des icônes pour l'enrichissement du texte. Celle qui a cet aspect 
<> ▼
 permet d'appliquer au code, suivant une liste de valeurs, le format correspondant à sa nature (C, Python, Shell, ...).
Un petit tuto là : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
0
MATADOR
22 déc. 2021 à 21:51
Je ne comprend pas ce que signifie la balise <div> ?
0
jee pee Messages postés 39655 Date d'inscription mercredi 2 mai 2007 Statut Modérateur Dernière intervention 27 avril 2024 9 238 > MATADOR
22 déc. 2021 à 22:10
<div> c'est une division, un bloc, un conteneur.

Quand tu mets <div id="banner1"> tu dis j'applique le style banner1 à tout ce qu'il y a dans le bloc.
0
MATADOR > jee pee Messages postés 39655 Date d'inscription mercredi 2 mai 2007 Statut Modérateur Dernière intervention 27 avril 2024
22 déc. 2021 à 22:16
Et si je veux mettre une image en voulant la modifier je fais comment ?

<div id "logo" >
<img src="....." >
</div>

Puis
#logo
}
Position-y=.....,
...
}
?
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650 > MATADOR
22 déc. 2021 à 22:23
Bonjour,

Pour la seconde fois ... merci d'utiliser les BALISES DE CODE pour poster du code sur le forum !
Explications ( à lire ENTIEREMENT !! ) disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

Ensuite ...
Dans le code que tu viens de donner .....
- Tu as oublié le signe "=" entre le mot "id" et "logo"

- Tu as mis deux accolades fermantes dans ton css ... normal que ça ne marche pas ...


Donc.. à corriger par : 
<div id="logo" >
    <img src="....." >
</div>



#logo {
position-y=.....,
...
}


Et puis... position-y .. je ne connais pas....
voir ici :
https://developer.mozilla.org/fr/docs/Web/CSS/position
0
MATADOR > jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024
22 déc. 2021 à 22:31
Effectivement désolé je n'avais pas fais attention au message...
Merci pour l'éclaircissement, et peut on mettre "<div2>" pour numéroter chaque balise ?
0
Réponse 2 / 2
MATADOR
23 déc. 2021 à 21:17
Je l'ai lu ! Ça m'a bien été utile merci, j'ai bien avancé pour mon site mais j'ai tout de même une dernière question
En effet, pour m'arrive sur mon site j'aimerai mettre une image de présentation, comme une bannière youtube, qui a une hauteur pas trop élevé mais prenant toute la largeur de la page. Malheureusement, j'ai essayé toute les balises : width, height,top,position...mais mon image reste toujours en haut à gauche de ma page... Escequ'il faut choisir une image avec la résolution de ma page internet, ou bien on peut élargir la largeur de l'image ?
0
jee pee Messages postés 39655 Date d'inscription mercredi 2 mai 2007 Statut Modérateur Dernière intervention 27 avril 2024 9 238
24 déc. 2021 à 10:56
je ne vois pas ce que tu veux faire. Mets un lien d'exemple, ou une image représentant la page finale.

"élargir la largeur de l'image" souvent une mauvaise idée, l'image est déformée, un rond devient ovale
0
MATADOR > jee pee Messages postés 39655 Date d'inscription mercredi 2 mai 2007 Statut Modérateur Dernière intervention 27 avril 2024
24 déc. 2021 à 15:29
En claire, comme la bannière qui a sur ce site avec QCM et le logo "?" cette bannière prend bien toute la largeur de la page, et bien c'est ça que je veux
0
jee pee Messages postés 39655 Date d'inscription mercredi 2 mai 2007 Statut Modérateur Dernière intervention 27 avril 2024 9 238 > MATADOR
24 déc. 2021 à 16:50
L'image ne prend pas toute la largeur, elle est trop petite, elle est juste centrée 

body {
   background-image: url("back.jpg");
} 
header {
   background: yellow;
   height:100px;
   top:0;
   left:0;
   right:0;
   background-image: url(logo.png);
   background-repeat: no-repeat;
   background-position: center;
}
footer {
   background: red;
   height:50px;
   bottom:0;
   left:0;
   right:0;
}
section {
   background-color: black;
   color: white;
}


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>Premiers tests</title>
</head>
<body>
<header>page 1</header>
<section>
<h1>Mon site web</h1>
<p>Lorem ipsum dolor sit amet. </p>
</section>
<footer>page 1</footer>
</body>
</html>


voir la structuration des pages : https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1605881-structurez-votre-page
0
MATADOR > jee pee Messages postés 39655 Date d'inscription mercredi 2 mai 2007 Statut Modérateur Dernière intervention 27 avril 2024
24 déc. 2021 à 18:25
Malheureusement rien ne change, même avec un "header" et "footer"...il reste toujours du "Blanc", cela ne prend pas toute la "largeur" de la page ...
J'ai remarqué d'ailleurs que j'ai ce problème pour la création de bordure cela ne prend pas toute la largeure...
0
jee pee Messages postés 39655 Date d'inscription mercredi 2 mai 2007 Statut Modérateur Dernière intervention 27 avril 2024 9 238 > MATADOR
24 déc. 2021 à 20:21
on te le dit depuis le début, il faut suivre un cours complet, http://css.mammouthland.net/margin-padding-css.php
0

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?
Raven -
bonjou -

9 réponses
code couleur associé a une image
magic charly -
pandora -

9 réponses