Un background-Image qui ne se fait pas sur un DIV.

**nouby** · 25/05/2023, 22h12

Bonjour,

j'ai un DIV dont le background-Image CSS ne fonctionne pas, mais si je mets un background-Color bleu il apparaît bien en bleu.
Sur le body il a 3 canvas qui sont tous à 100% en taille donc j'aurais pu croire que c'était à cause d'eux, mais non puisque le bleu du Div fonctionne quand je mets le background color bleu, et ce que j'écris dans le div se voit bien aussi, en plus le zindex des canvas est inférieur à celui du DIV, mon problème c'est seulement que le css n'agit pas sur le background image du DIV.

Le div "bar1" est déclaré dans le body :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<body>
 
	<div id="contener">
		<canvas id="ecran0"></canvas>		   
		<canvas id="ecran1"></canvas>
		<canvas id="ecran2"></canvas>
 
	</div>
 
    <div id="bar1" onclick="testecase(1)">aaaaa</div>
 
</body>
 
</html>
 
 
<script>
    var barre1=document.getElementById('bar1');
    
        var ctx0 = document.getElementById('ecran0').getContext('2d');
        var ctx1 = document.getElementById('ecran1').getContext('2d');
        var ctx2 = document.getElementById('ecran2').getContext('2d');
</script>>
 
 
<script type="text/javascript">
        window.onload=function(){init();};
</script>

Mon

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
#bar1{
    position:absolute;
    left:0;
    top:100px;
    bottom:96px;
    height:48px;
    width:1280px;
    background-image:url("img/gui/barre01.jpg");
    z-index: 4;
}

Mon code JS, mais ril n'a aucunes actions de ma part sur le DIV :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function init(){
 
/* ***************** DEFINIT LA TAILLE DE L'ECRAN GRAPHIQUE ************************ */ 
 
	// Adapte le canvas CTX0 à la taille de l'écran.
 
	ecran0.width=largeur;
	ecran0.height=hauteur;
	ctx0.width=largeur;
	ctx0.height=hauteur;
 
	// Adapte le canvas CTX1 à la taille de l'écran.
 
	ecran1.width=largeur;
	ecran1.height=hauteur;
	ctx1.width=largeur;
	ctx1.height=hauteur;
 
	// Adapte le canvas CTX2 à la taille de l'écran.
 
	ecran2.width=largeur;
	ecran2.height=hauteur;
	ctx2.width=largeur;
	ctx2.height=hauteur;
}

**CosmoKnacki** · 25/05/2023, 23h07

C'est peut-être que le chemin vers l'image est faux. Si tu utilises une feuille de style externe, le chemin relatif doit être écrit par rapport à la position de la feuille de style, pas par rapport à la page qui fait appel à la feuille de style. Pour vérifier qu'il s'agit bien d'un problème de chemin relatif, c'est simple, écrit le chemin absolu (http://mon.domain.truc/images/monimage.jpg) et regarde si ça marche.

Attention, même si tu fais le choix de placer ton javascript à la fin de la page, un document html n'a qu'une racine, pas deux, donc mets tes balises script à la fin du body, jamais en dehors des balises html.

**nouby** · 25/05/2023, 23h42

Merci

pourtant je vérifie que le chemin de l'image est bon et ça ne marche pas, je vais revérifier.
Dans mon dossier l'image est dans "img/gui/barre01.jpg".

**CosmoKnacki** · 25/05/2023, 23h52

Et le fichier css est situé où?

**nouby** · 25/05/2023, 23h55

Merci !!!

Ce que vous m'avez dit m'a fait réfléchir et j'ai ajouté "../" devant le chemin que je donnais dans mon CSS et ça marche

C'est résolu, mais je n'arrive pas à ce que le div affiche son background image en entier sans utiliser le css, car je veux un affichage qui s'adapte à la largeur écran de l'utilisateur et que le div soit centré horizontalement, je voulais que ce soit son image qui lui donne sa largeur, en faisant ça avec le javascript à la rigueur, mais j'ai donné en js une largeur au div et l'image s'affiche pas, alors que tout marche si je donne une largeur dans le css.
.
J'ai essayé

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
   image3.onload=function(){
        barre1.style.width=image3.width;
        barre1.style.left=parseInt(largeur/2)-parseInt(barre1.style.width/2);
    }
 
    image3.src="../img/gui/barre01.jpg";

ce code est dans le init précédent et image3 est créée en début de page js par new image().

l'image s'affiche si je donne une largeur fixe dans le css à mon div barre1. mais reste à left=0.

**CosmoKnacki** · 26/05/2023, 19h48

Je ne sais pas trop ce que tu cherches à faire, mais pas besoin de javascript pour centrer un div, ni pour qu'il s'adapte au viewport, tout ça peut se faire en css en utilisant des unités relatives. Pour corréler l'image de fond avec son div, tu dois pouvoir faire quelque chose avec background-size.

Un background-Image qui ne se fait pas sur un DIV.

CSS

Vue hybride

Discussions similaires

Partager

Partager