Discussion :

[Danwan]

Bonjour à tous.

J'ai un cadre à fond bleu qui fait la totalité de la largeur de page.

A l'intérieur, j'y ai mis une image, centrée verticalement et sur la droite.
Parfait. Tout ce comporte très bien.

Seulement j'aimerais qu'elle ressorte de cette DIV en gardant ses propriétés. En cherchant, j'ai trouvé un système en passant par un ::before mais ca ne ressort que par en bas de la DIV et ce n'est plus centré verticalement.

Rien ne vaut une image pour montrer mon souhait :


Merci à tous pour votre aide

[Invité]

Bonjour,

Rien ne vaut un minimum de code...

Quelques réflexions :

• Pas sûr que du texte par dessus un logo soit très lisible...
• Que se passe-t-il quand la hauteur du cadre bleu augmente (avec plus de texte, ou si on diminue la taille de la fenêtre) ?

Une solution :

Code css :

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
div {
  position:relative;
  z-index:0;  
 
  background:lightblue;
  padding:20px;
}
div:before {
  position:absolute;
  display:block;
  content:'';
  width:100%;
  height:140%;
  top:-20%;
  right:0;
  background:url('.................logo.png') center right no-repeat;
  background-size:contain;
  z-index:-1;
}