Hello,
 
je suis actuellement un parcours sur openclassroom pour devenir dvp web junior, après avoir compris les bases de HTML/CSS et Bootstrap on me demande d'intégré une maquette .psd https://dribbble.com/shots/3367102- [...] D-Template
et je galère un peu car c'est une sacré étape et en particulier sur un élément : le bandeau en background, et le logo et la citation par dessus mais pas aligné a gauche, on m'a conseiller de mettre le bandeau en background sous CSS mais le soucis c'est que je n'ai sais pas ou placer ma div pour qu'il soit libre d'etre déplacé a droite sans bouger l'ensemble logo+citation
 

 
voila ou j'en suis:

 
et mon code:

               
Si vous avez une idée je suis preneur

1. Mets ton bandeau dans une div a part que tu positionneras a la troisieme colonne grace aux classes css de bootstrap.

2. Essaie de reproduire ton pb sur jsfiddle et de nous donner l'url ensuite, ca permet pour nous de voir le probleme et de te montrer la correction.

J'avais testé mais je n'arrivai pas a avoir 2 colonnes l'une dans l'autre ça me mettait mon bandeau en haut et le reste à la ligne :s  
 
La j'ai réussi en mettant le bandeau en Background sous CSS et en lui définissant des paramètre avec background-size et background-position et comme ça j'ai pu mettre une div qui s'affiche par dessus mais c'est pas super responsive car quand je réduit la fenêtre le bandeau se positionne mal et son aspect change

 

Ce que je pense qui pourrait fonctionner c'est le schema suivant vous en pensez quoi ?
Mon soucis c'est que je n'arrive pas a mettre mes  div les une sur les autres en 1er plan et 2eme plan, elles se mettent à la suite, est ce que je doit utiliser des z-index ? si oui comment ?

 
 Tu peux utiliser une div englobante en position:relative et caler les divs a l'interieur en utilisant position: absolute par ex.
Maintenant sur la maquette psd on voit bien que tt est cale sur les colonnes bootstrap, donc je pense qu'il vaut mieux utiliser le css bottstrap.
J'insiste, fais un jsfiddle, la comme ca a expliquer c'est tres chiant sinon.
 
Edit: t'as gagne, je l'ai fait pour toi: https://codepen.io/anon/pen/wpXdrN

je te remercie, je vais analyser et comprendre le code
je vais me mettre a jsfiddle, désolé si je ne l'ai pas fait directement mais ayant débuté il y a peu j’essaie de pas trop m'éparpiller sur les outils mais je vais le prendre en main

 
C'est simplement que jsfiddle ou codepen ca permet de montrer un probleme aux autres en mettant juste le code qui pose probleme, pour eviter aux intervenants de lire tout le code du projet.

oui j'ai vu ça c'est assez puissant comme outil la je bosse sur ton code je l'ai un peu simplifié et adapter a ma page.
 
Par contre concernant l'intégration est ce que je doit considéré les 12 colonnes de photoshop comme étant ma page web dans toutes sa largeur ou alors comme le centre de la page avec les marges de chaque cotés dans lesquels dépasse le bandeau ?

C'est une bonne question. Je pense qu'elles representent les 12 colonnes de bootstrap en mode non fluid, mais je suis pas sur.

Bonjour  
je n'ai jamais travailler avec Bootstrap, mais est ce que c'est une bibliothèque  de HTML/CSS et JS ?

 
C'est un ensemble de classes css facilitant la mise en page responsive + une collection de widgets pour faciliter la presentation (cards, carousel, etc.). Ces derniers widgets necessitent quelquefois un peu de js pour fonctionner, mais bootstrap n'offre pas de librairie js generaliste comme jquery, ou de framework comme angular.

c'est ce que je pense aussi, en tout cas je vais faire le choix d'intégrer la maquette comme ça.
Merci pour ton aide en tout cas je vais poursuivre mon intégration et je reviendrais si je rencontre d'autre soucis (ce dont je ne doute pas ^^)

Tu peux aussi remplacer les fake div col-sm-x par un col-sm-offset-x dans la div enfant, ça allègera un peu

Autre option un poil allégée, mais ça n'utilise pas Bootstrap pour le décalage (après avis perso, du Bootstrap pour du Bootstrap ça peut vite devenir emmerdant dans certains cas ):

https://jsfiddle.net/m1gh4ech/13/

edit: retropédalage en revoyant la maquette en effet c'est prévu strictement pour de l'offset Boostrapien

 
C'est mieux en effet, merci.

edition de l'url, j'avais pas enregistré les dernières modifs

 
salut, c'est ce que j'ai fait j'ai remplacer toutes les div vide par des offset sa allège beaucoup le code, en effet le tien est encore plus épuré
voila ma version pour le moment :
https://jsfiddle.net/m1gh4ech/15/
 
Sinon la j'utilise Bootstrap car c'est l'objet du TP

j'ai essayé d'adapter ton code avec ma maquette mais je pense que l'utilisation du container-fluid n'est pas adapté car en plein écran le background se répétait ou alors si je lui fixais une dimension avec width il se décalait trop a droite. Du coup sa me conforte dans le choix d'intégrer la maquette en prenant en compte seulement les 12 colonnes centrale et sans tenir compte des débordement sur les cotés

Oula pas de div pour l'underline! Utilises directement le tag <u> (quitte à laisser seulement la règle pour la coloration).
 
2/3 bidouilles encore:
https://jsfiddle.net/m1gh4ech/18/
 
le container-fluid est adapté pour occuper 100% de la largeur, dans ce cas précis l'image se répète si trop petite pour occuper 100% de l'écran, mais normalement t'es censé prévoir un bandeau assez large (mini 1920px). Autrement tu ajoutes "no-repeat" après le fixed que j'ai ajouté, tu verras
 
Ça semble pas trop mal mais un truc me chagrine dans l'idée d'imbriquer 2 div censées se superposer gérées par bootstrap
 
Là où un margin-left negatif sur la div intérieure comportait moins de risques.  
Ici si tu réduis la largeur de l'écran, t'as les 3 div qui wrappent et s'empilent, c'est dégueu.
 
J'ai ajouté la gestion du body, et la remplacé ton top:100px par 25%, j'éviterais au max les dimensions absolues sur des propriétés de positionnement, sur un resize vertical ton bloc logocitation se berrerait loin en bas
 

 
 
Je ne peux qu'appuyer tout ce que tu dis, c'est en effet mieux. Je m'étais arrété à du quick qnd dirty.  
Juste un truc : nn offset négatif a en effet moins d'effets de bord, mais il ne permet pas de se caler sur les colonnes de bootstrap comme c'était le cas sur la maquette, et j'aime pas l'idée de coder une valeur en dur qui coïncide.

En effet c'est plus simple et moins chargé
 
 

Alors mon soucis c'est que le bandeau que j'ai extrait de la maquette fait 1345px du coup soit il se répète et il prend la dimension de la div ou alors no-repeat mais du coup le positionnement sur la page n'est pas bon :s
clairement je pense que la maquette n'a pas été faite pour être intégré dans des container-fluid.  
 

En effet c'est pas super propre sinon il y a la solution de masqué certain élément sur très petit écran ce qui ne me semble pas aberrant d'autant que je débute.
 
 
 
 

Il y a encore du boulot niveau du design responsivit et quelques détails manquant mais j'ai pas mal avancer je l'ai mis en ligne pour tester en condition réel
http://julemane.alwaysdata.net/

Pas si mal, on trouve bien bien pire côté responsive