Problème d'affichage d'une image de fond

Bonjour,
Je dois mettre une image de fond sous 2 vidéos, qui sont dans une section, voici mon code, mais elle n'apparait pas ! Et le chemin vers l'image est bon...:
css :
.nos-videos #videos{
background: #ffffff url(img/fond1.jpg) no-repeat;
background-size: cover;
}
html :

<section class="nos-videos">
<div id="videos">
<div class="row">
<div class="col-xs-6">
<iframe width="560" height="315" src="https://www.youtube.com/embed/HzwuTBx93uA" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
<div class="col-xs-6">
<iframe width="560" height="315" src="https://www.youtube.com/embed/ipILrJmGb7o" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</div>
</div>
</section>

Merciii !
Modifié par A2L (27 Jan 2018 - 17:27)

Bonjour,

Et avec l'url entre guillemets as-tu essayé ?

Toujours rien !

Bonsoir,

Quand on est coincé comme cela : il vaut mieux écrire dans un premier temps le chemin en absolu. Juste pour tester...

Qu'est-ce qu' "en absolu" ?! merci..

Et bien par exemple, sur ce forum, si vous regardez l'interprétation du code source votre avatar est en absolu :

background-image:url(//cdnf.alsacreations.net/avatars/1517069958-69183-ma.jpg)

Un article sur le forum : Quelle est la différence entre les chemins relatifs et absolus ?

Ça ne veut pas dire que vous devez abandonner votre paramétrage en relatif, mais les problèmes d'affichage des images étant la plupart du temps dus à un problème de chemin, le fait de coder en absolu permet déjà d'écarter cette possibilité d'erreur.
Modifié par Olivier C (27 Jan 2018 - 19:54)

Merci.. je me doutais, pas sûre ! mais le problème n'est pas ça malheureusement !

Bonjour,

Si on met directement dans le fichier html une balise <img scr="img/fond1.jpg">, est-ce que l'image apparait ?

Le fichier css est-il dans le même répertoire que le fichier html ou pas ? S'il ne l'est pas, il faut faire attention à ce que le chemin relatif de l'image "img/fond1.jpg" soit calculé par rapport à l'emplacement du fichier css et non par rapport à l'emplacement de la page html.

Y-a-t-il des majuscules dans le chemin ou le nom de l'image ? Certaines machines ne font pas la différence entre majuscule et minuscule dans les noms de fichiers, d'autres machines font une différence.

Remarque en passant : dans le css, faire précéder #videos par .nos-videos me semble douteux. Un id devant être unique dans la page, #videos seul devrait suffire (sauf contraintes complexes comme par exemple remplacement de la classe ".nos-videos" par autre chose avec du javacript).

Amicalement,

Bonjour, et merci...

- pour le #videos et .nos-videos, j'ai bien une div "nos-videos" et un id "videos", ils sont bien attribués, mais je peux simplifier je pense
- pas de maj ni accent etc
- le fichier css est bien lié, toute la pg est mise en forme avec

> quand je la mets en src ds html, elle ne s'affiche pas non plus, juste le mini icone image ! Elle est bien en RVB, jpg, etc...

voila !?!
Modifié par A2L (27 Jan 2018 - 21:57)

J'y pense, un indice, ou pas, j'ai aussi un problème nouveau avec ce dossier, c'est que mes photos (mais pas toutes ! alors que mêmes formats, etc) ne s'affichent pas non plus si j'ouvre mon fichier en localhost ! Donc je visualise en faisant "Ouvrir..." depuis le navigateur Goog. Chrome.
Et j'ai ces messages qui s'affichent dans la console de l'inspecteur : cf capture jointe.

Bonjour,

L'image fond1.jpg est "not found" (introuvable). A 99%, c'est un problème de chemin. Si tu as dans ton css url(img/fond1.jpg), l'image fond1.jpg doit se trouver dans un dossier nommé "img", et ce dossier "img" doit être dans le même dossier ton fichier css. Est-ce bien le cas ?

Pour les photos, il semble y avoir un problème de droits d'accès aux fichiers.

Amicalement,

Oui, je viens de tilter que je me positionnais comme une url chargée dans html... mais bon, j'ai remis le bon chemin en partant du fichier css où elle est en background et toujours pas d'affichage...

Oui, je ne comprends pas ce droit d'accès aux fichiers, ce sont mes photos, rien de verrouillé ni protégé... j'ai vu dans des recherches que ce n'était parfois qu'un petit truc à corriger...pas les photos elles-même, mais sur mon ordi ? sauf que je ne comprends pas grand chose à ça... !

Dans l'inspecteur, elle est barrée dans les Eléments ?!

Bonjour,

Sur la capture écran je vois que l'url est placée entre guillemet mais qu'il manque celui du début. De fait le navigateur y voit là une erreur et passe la règle sans l'appliquer.

Dans l'hypothèse où le soucis ne serait pas là, constater qu'une règle est ignorée dans l'inspecteur, hormis le fait que son écriture soit erronée, signifie que celle-ci est réécrite plus bas dans le css par un sélecteur de même poids ou supérieur ou plus haut par un sélecteur de poids supérieur.

Bonjour,
Merci !! cette fois, avec tous mes essais et copier-coller j'avais bel et bien perdu un guillemet ! Affichage résolu !

Sauf toujours si je suis en localhost , toujours un problème de droits et erreurs 404 et 403, ce ne sont pas des images récupérées, protégées, mais faites par moi et déjà utilisées sur mon site perso en ligne !

N'avez-vous pas une instruction dans le .htaccess qui empêche l'affichage en localhost ?

Le 404 signifie que le document n'existe pas donc que l'url fournie est erronée (problème de chemin ou problème de syntaxe - casse -> 'a' différent de 'A', accents -> perso je vire tout accent car ça fou la..., extension -> jpg différent de jpeg).
Cet élément peut-être facilement corrigé en comparant via la console ce qu'on obtient comme url et ce que l'on souhaite.

Toutefois, le code 403 signifie que l'accès est interdit, donc que le document existe et qu'il a été trouvé. En local, en tout cas sous système Windows, on ne rencontre jamais un problème de droit qui serait défini par le système sauf dans les dossiers protégés (par ex System32, Windows etc - ce n'est certainement pas votre cas).
De fait, ne me vient à l'esprit, qu'une possibilité: une restriction dans le serveur. En supposant que vous tourniez sous Apache (j'espère car je ne connais pas Nginx), ces restrictions s'opèrent via le fichier .htaccess (qui peut-être renommé autrement pour peu que vous bidouillez la configuration).

Dans le .htaccess on peut explicitement verrouiller l'accès à un dossier, un fichier, à un type de fichier ou encore au site entier.


Votre phénomène se produit-il exclusivement avec les fichiers de type images ?
Se produit-il uniquement lorsqu'elles sont appelée par ce fichier css (par ex html non impacté) ?
Avez-vous testé en plaçant l'image dans le même dossier que votre fichier Css ?

De plus, je constate que votre console vous renvoi l'adresse avec la conversion du signe espace en '%20'. Je ne saurais affirmer que cela puisse-t-être la cause de vos maux mais pour la même raison que j'évite les accents dans les uri, j'en fais de même avec les espaces. Le caractère '_' est très bien supporté


Voici quelques pistes à exploiter.

Dans l'attente de votre retour.

Merci beaucoup pour toutes ces infos précieuses !
Alors, pas de pbl de chemin, jpg, pas d'accent, pas de capitale, pas d'espace, ni guillements, tout est ok ; et en travaillant en ouvrant ma pg html (plutot qur par localhost) j'ai tout bien nikel 0 souci !!
Mais quand même cet affichage dans la console (cf img jointe)
Comme j'en ai vu parler sur des forums mais sans trop comprendre (pour info, suis bien sous apache, avec xampp, et sur Mac !), cela ressemble à un pbl d'accès et je n'y connais pas assez en informatique pour sa voir ou comment mettre les mains !!

Merci beaucoup, je dois m'interrompre pour le moment, je continuerai mes recherches plus tard !