Image en fond avec images par dessus:

Bonjour,
cela fait 2 heures que je cherche sur le Net une solution à ce problème.
Ne trouvant pas la solution, il ne reste plus qu'Alsacréations:

Je voudrais mettre une image en background occupant tout l'écran.
Puis ajouter par dessus d'autres images plus petites.
J'ai essayé le background image multiple, mais rien à faire:

.imageaccueil{
background-image: url(C:imgfond.jpg), no-repeat;}/*
    url(C:/img1.jpg),no-repeat left top,
    url(C:/img2.jpg) no-repeat right top, 
    url(C:/img3.jpg) no-repeat left bottom, 
    url(C:/img4.jpg) no-repeat left bottom ;}

Je pense que ça vient de la classe qui nest pas mise comme il faut;

<div class="imageaccueil"></div>

Merci pour votre aide!

Bonjour abeille,

Tu semble ton compliquer la vie. Si je comprends bien tu tente d'appliquer une superposition d'images dans un même conteneur ?!

Essaye de penser en 1er et second plan. Un exemple :
- appliquer un fond sur la balise html qui couvre l'intégralité de l'écran
- placer plusieurs images avec background position sur le body
Résultat, les images appliquées sur le body couvrirons le fond ; là où il n'y aura pas d'image apparaîtra le fond.

Après tu peux aller plus loin en appliquant des fonds différents à divers éléments de ton html. Le DOM sera le reflet des niveaux de superposition.

Qu'est-ce que tu en pense ?
Modifié par Greg_Lumiere (13 Mar 2016 - 10:44)

Bonjour,

Pour infos, tu peut nous laisser, par exemples tes tests/soucis en ligne sur http://codepen.io/pen en te servant éventuellement de faux contenus, comme ici : http://lorempixel.com/ ou http://dummyimage.com . pour des morceaux de structure HTML tu as des truc comme http://html-ipsum.com (codepen propose aussi des préprocesseur coté HTML et CSS ).

ton problème ne nous dit pas grand chose là, quelles sont les dimensions des images par exemples ?, j'en vois 2 en left bottom ...

de plus en te servant de codepen, tu pourras débugguer rapidement tes essais car la mise à jour CSS est quasi instantanée, si il y a une erreur de syntaxe, tu le sait et bien souvent en appliquant tes régles CSS au fur et à mesure, tu vois aussitôt quels en sont les effets > inefficaces, pertinentes , voir buguées ? en gros a ce stade tu te dépannes généralement seul (erreur de syntaxe, mauvais selecteur, oubli d'une regle essentielles, etc...).

La gestion des préfixes se fait aussi en automatique, ... bref plus efficaces que les outils de développement des navigateurs en général

Enfin tu peut sauvegarder et partager (via codepen, Github ou une archive ZIP) sur les forums les morceaux de codes qui te posent problèmes ou les solutions que tu peut proposées en aidant les autres

Cdt
Modifié par gcyrillus (13 Mar 2016 - 13:59)

Salut Maya,

abeille a écrit :
Dites moi s'il y a mieux que ça.

Il y a mieux que ça ! Et c'est ce que te proposait Greg_Lumiere : 1 conteneur global avec un fond et les trois images positionnées comme tu le souhaite dedans. Dans ta solution il y a beaucoup de div inutiles. A quoi sert de positionner une div avec une img dedans quand on peut positionner directement l'img ?
Donc au final il faudrait que ca ressemble à ça :

<div class="fond">
      <img class="im1" src=".....img1.jpg" alt=""/>
      <img class="im2" src=".....img2.jpg" alt=""/>
      <img class="im3" src=".....img3.jpg" alt=""/>
</div>

Coté CSS il faut faire en sorte que ton fond prenne toute la place possible et tes images bah tu peux les positionner en absolute comme tu l'as fait.

:)

_laurent a écrit :
Salut Maya,
Il y a mieux que ça ! Et c'est ce que te proposait Greg_Lumiere : 1 conteneur global avec un fond et les trois images positionnées comme tu le souhaite dedans. Dans ta solution il y a beaucoup de div inutiles. A quoi sert de positionner une div avec une img dedans quand on peut positionner directement l'img ?
:)

Parce que je n'ai pas compris ce que m'expliquait Greglumière! (non pas qu'il explique mal, mais parce que je n'ai pas le niveau pour comprendre!)

Greg_Lumiere a écrit :

- appliquer un fond sur la balise html qui couvre l'intégralité de l'écran

Par exemple je ne comprends pas cette phrase!

Ce que tu me dis toi est plus simple pour moi, c'est de l'or en Alsacreation.
Merci.
Maya.
Modifié par abeille (14 Mar 2016 - 09:43)

abeille a écrit :

Par exemple je ne comprends pas cette phrase!

En gros, le but est d'appliquer un fond avec background-image url sur ta div,
je parle bien sur de la structure de _laurent :

<div class="fond">
      <img class="im1" src=".....img1.jpg" alt=""/>
      <img class="im2" src=".....img2.jpg" alt=""/>
      <img class="im3" src=".....img3.jpg" alt=""/>
</div>

.fond{
  background: url(image/fond.jpg) no-repeat center fixed; 
  background-size: cover;
}

et ensuite tu pourrais positionner tes images tranquillement.
Modifié par JENCAL (14 Mar 2016 - 10:54)

SolidSnake a écrit :

De mémoire, pas sur des images !

ah mince.. j'utilise jamais after/before, mais je pensé que c'était gérable partout...

SolidSnake a écrit :

De mémoire, pas sur des images !

Ah, vous voyez que c'est pas évident.
C'est pour ça que tous les DIV que j'avais mis, c'était quand même pas mal non?

<div class="fond"><img src="....fond.jpg" alt=""/>
<div class="im1"><img src=".....img1.jpg" alt=""/>Texte</div>
<div class="im2"><img src=".....img2.jpg" alt=""/>Texte</div>
<div class="im3"><img src=".....img3.jpg" alt=""/>Texte</div>
</div>

Avec dans le Css, .fond{...} en background
et les autres images fixées.

Qu'en penses tu?

Et le soucis, c'est que tu n'avais pas exposé la problématique de légende sur tes images, et là, ben ça change tout, l'organisation devient un peu plus complexe selon comment tu veux placer tes légendes !
Pour être propre, je vois un truc comme cela :

<div class="global"> <!-- Avec ton fond en background -->
  <figure>
    <img src="" alt="" />
    <figcaption></figcaption>
  </figure>
  <figure>
    <img src="" alt="" />
    <figcaption></figcaption>
  </figure>
  <figure>
    <img src="" alt="" />
    <figcaption></figcaption>
  </figure>
</div>

BOnsoir Serpent Solide, merci pour ton explication.
Entre temps j'ai pas mal galéré et j'ai fait autrement qu'avec les figcaption:

<img class="imagedefond" src="fond.png" alt=""/>
<div class="im1"><img src=".....png" alt="" légende1</div>
<div class="im2"><img src=".....png" alt="" légende2</div>
<div class="im3"><img src=".....png" alt="" légende3</div>

Maintenant, je ne sais pas si avec figcaption c'est mieux ou pas.
A mon avis c'est le même résultat non?

MErci pour ton explication.