Background sur CODE PEN

12 décembre 2017 à 11:10:20

Hello les codeurs,

Je ne comprend pas pourquoi mon image background ne s'affiche pas ...

Je fais un exo de FreeCodeCamp, mais je me demande si le problème ne vient pas de CodePEN (ce qui me semblerai bizare).

Voici le HTML :

<body>
<h1 class="text-center">M. Serge GAINSBOURG</h1>
<h2 class="text-center">Chanteur, Compositeur, Parolier</h2>

<div class="imgcenter"><img class="rounded-circle marge" src="http://1.bp.blogspot.com/_Ldo6gcEAKNk/TOqfFcn7Q5I/AAAAAAAAAp0/V8rMX9MdP9I/s400/serge-gainsbourg-267.jpg"></div>
</body>

Voici le CSS :

 h2 {
    font-family: Monospace;
  }
.marge{
    border-color: white;
    border-width: 5px;
    border-style: solid;
}
.imgcenter{
  text-align : center ;
}
 body{
 background-image: url("http://tophdimgs.com/data_images/wallpapers/11/361682-css-background.jpg");
}

Avez vous pu cibler l'erreur? J'ai regarder, normalement ma fonction CSS background est bonne, j'ai rajouter les éléments <body> et </body> mais rien n'y fait... Après 1heure de recherche, je demande votre aide :).

Merci a tous

Hidoimatsu

12 décembre 2017 à 11:18:04

Bonjour,

Évite le hot linking et héberge ton background. Ça devrait fonctionner.

Lamecarlate

12 décembre 2017 à 11:19:40

Bonjour,

le problème vient de "http". Quand un navigateur affiche une page en https (note le "s"), les ressources en http, non sécurisées, sont rejetées. Il faut donc que tu ajoutes ton image via https. Sauf que tophdimgs.com ne semble pas avoir de version https… Donc, il faudrait que tu héberges ton image autre part, sur un site avec https.

(edit : ça se recoupe avec le message de Hidoimatsu, parce que par défaut le site dont tu tires l'image renvoie vers la page de téléchargement de l'image, pas l'image elle-même)

-
Edité par Lamecarlate 12 décembre 2017 à 11:26:39

Pas d'aide concernant le code par MP, le forum est là pour ça :)

Mewen_bzh

12 décembre 2017 à 11:21:49

SAlut,

Tu pourrais nous donne le lien vers le rendu sous CodePen ?

Merci

Je ne réponds pas aux messages privés.

bastienjeux

12 décembre 2017 à 11:32:19

OK donc si j'ai compris il faut que je trouve une image qui soit avec un lien https?

Connaissez vous des sites qui propose des images avec des liens https? en effet, je trouve que des http...

Pour le lien je veux bien le mettre, y a t'il un lien "visiteur" ou faut il que je vous donne directement le lien de ma page?

Lamecarlate

12 décembre 2017 à 11:37:57

https://imgur.com/, https://postimages.org/, https://imgbb.com/, https://www.noelshack.com/ . Tous trouvés dans la première page de résultats pour "upload image". (certes, il m'a fallu ajouter le https dans l'url pour plusieurs afin de vérifier)

Et pour ta page, oui, il suffit de donner l'url que tu vois, nous ne pourrons rien modifier, juste voir

Pas d'aide concernant le code par MP, le forum est là pour ça :)

bastienjeux

12 décembre 2017 à 11:44:22

https://codepen.io/bgjeux25/pen/mpbxom (c'est en cour pour le projet FreeCodeCamp....)

Merci pour tes liens @Lamecarlate c'est super, en fait il faut que je fasse héberger les images sur des sites en "https" si je comprend bien...

Lamecarlate

12 décembre 2017 à 11:49:31

Je viens de voir tes modifs. Alors, apparemment les images ont - pour l'instant - un passe-droit, au temps pour moi, le problème était plus ce que disait Hidoimatsu, à savoir que tophdimgs.com empêche le hot-linking. Mais il faudra passer à https un jour ou l'autre

(tu peux rajouter le "s" dans l'url de ton image de Gainsbourg, au fait)

Pas d'aide concernant le code par MP, le forum est là pour ça :)

bastienjeux

12 décembre 2017 à 12:09:47

Ok, si je peux rajouter le S a la main pour que ça marche, c'est plus simple ^^.

Bon maintenant mon mini-chalenge et d'essayer d'écrire le texte sur 2 colonnes (un peu comme dans un journal). Je vais regarder du coté de chez Bootstrap pour y arriver...

En tout cas c'est super d'avoir tes retours @Lamecarlate, on se sent bien aider, et bien entouré, j'affectionne vraiment de plus en plus ce site.

Un grand merci

Lamecarlate

12 décembre 2017 à 12:17:15

Pas besoin de Bootstrap pour ça, tu as une mouche à tuer, ne sors pas le bazooka

Pour écrire sur deux colonnes, deux possibilités :

soit tu décides de ce que tu mets dans chaque colonne, et dans ce cas tu te fais une petite grille avec le modèle flexbox
soit tu veux que ça "suive le courant", et tu utilises la propriété CSS columns

Je te laisse chercher ces deux termes.

(et tu me vois ravie que tu te sentes bien entouré : on essaie autant que possible de faire de l'entraide et d'amener les gens vers des codes propres et cohérents, et c'est très agréable d'avoir des retours positifs)

-
Edité par Lamecarlate 12 décembre 2017 à 12:18:13

Pas d'aide concernant le code par MP, le forum est là pour ça :)