Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
3126 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Superposer deux background ? [CSS]

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Superposer deux background ? [CSS]

n°2435893
firstoneee
Posté le 17-12-2022 à 20:22:15  profilanswer
 

Bonjour, j'ai un problème en CSS que je n'arrive pas à résoudre. Je souhaiterais faire passer une bande orange derrière l'image et le texte tout en restant dans mon article.

Code :
  1. <article>
  2.   <header><h1>Ichigo Kurosaki</h1></header>
  3.   <hr>
  4.   <img class="cote" src="image/ichigo.png" height="300" alt="image de personnage">
  5.     <p> Thalassius vero ea tempestate praefectus praetorio praesens ipse quoque adrogantis ingenii,
  6.       considerans incitationem eius ad multorum augeri discrimina, non maturitate vel consiliis mitigabat,
  7.       ut aliquotiens celsae potestates iras principum molliverunt, sed adversando iurgandoque cum parum
  8.       congrueret, eum ad rabiem potius evibrabat, Augustum actus eius exaggerando creberrime docens, idque,</p>
  9. </article>


Voici une partie de mon html et le css qui touche à ce problème donne

Code :
  1. article{
  2.     background-color: #0d1a28;
  3.     margin: 3em 3em 4em;
  4.     padding: 0 0 1em;
  5.     overflow: hidden;
  6. }
  7. article p{
  8.     color: white;
  9.     padding: 20px;
  10. }
  12. article #php{
  13.     color: white;
  14.     padding: 20px;
  15.     font-size: 1.2em;
  16. }
  18. article h1{
  19.     font-family: Ayuthaya, serif;
  20.     color: white;
  21.     padding-left: 20px;
  22.     padding-top: 20px;
  23.     font-size: 2em;
  24. }
  26. hr{
  27.     width: 75em;
  28. }
  30. .cote {
  31.     float: right;
  32.     margin: 6px 6px 6px 6px;
  33.     text-align: justify;
  34.     padding: 1.5em 2em 1.5em 1.5em;
  35. }


 
J'aimerais donc faire passer une bande orange derrière l'image, le texte et le titre sur toute la largeur de l'article en diagonal, j'ai essayé d'utiliser une div avec un background, mais je n'y arrive pas, comme la div entours tout le texte quand je change sa taille ou sa rotation tout le texte change avec. J'ai aussi essayé d'utiliser deux background dans mon <article> mais je n'y arrive pas. Je vous ai envoyé un lien WeTransfer avec un screen du site et ce que je veux faire si vous ne compreniez pas. https://we.tl/t-UzMsQFyfKl
 
Si vous avez des solutions, je suis preneur, Merci de votre aide

mood
Publicité
Posté le 17-12-2022 à 20:22:15  profilanswer
 

n°2436067
mechkurt
Posté le 19-12-2022 à 23:05:50  profilanswer
 

En général pour faire du style "en plus" (sans la notion d’intérêt sémantique à ajouter des balises) on utilise des pseudo block :before ou :after dans le css.
https://code-garage.fr/blog/les-pse [...] er-en-css/
 
Dans ton cas faudra surement mettre ton conteneur en relative et virer l'overflow hidden et ton pseudo élément en absolute avec des positions négative pour qu'il "dépasse" du conteneur.


---------------
D3
n°2436169
firstoneee
Posté le 20-12-2022 à 20:43:12  profilanswer
 

Bonjour, je te remercie pour ton aide ça à bien fonctionner tous est comme je le voulais. J'aurais une autre question qu'y n'a rien à voir, mais j'aimerais rajouter une animation pour faire en sorte que le texte arrive depuis un côté de mon article.

Code :
  1. article .orange::before{
  2.     content: url("image/orange.png" );
  3.     position: absolute;
  4.     display: inline-block;
  5.     bottom: 20px;
  6.     left: 800px;
  7.     transform: rotate(60deg);
  8.     z-index: -10;
  9. }
  10. article .rose::before{
  11.     content: url("image/rose.jpg" );
  12.     position: absolute;
  13.     display: inline-block;
  14.     bottom: 20px;
  15.     left: 800px;
  16.     transform: rotate(60deg);
  17.     z-index: -10;
  18. }
  19. article .blanc::before{
  20.      content: url("image/blanc.jpg" );
  21.      transform: rotate(300deg);
  22.      position: absolute;
  23.      display: inline-block;
  24.      bottom: 20px;
  25.      right: 800px;
  26.      z-index: -10;
  27. }
  28. article .orange{
  29.     animation-name: slidedroite;
  30.     animation-duration: 3s;
  31. }
  32. article .rose{
  33.     animation-name: slidedroite;
  34.     animation-duration: 3s;
  35. }
  37. article .blanc{
  38.     animation-name: slidegauche;
  39.     animation-duration: 3s;
  40. }
  42. @keyframes slidegauche{
  43.     from{
  44.         margin-left: 100%;
  45.         width: 100%;
  46.     }
  47.     to{
  48.         margin-left: 0%;
  49.         width: 100%;
  50.     }
  51. }
  52. @keyframes slidedroite{
  53.     from{
  54.         margin-right: 100%;
  55.         width: 100%;
  56.     }
  57.     to{
  58.         margin-left: 0%;
  59.         width: 100%;
  60.     }
  61. }


Voici le css que j'ai fait, pour l'animation de "slidegauche" tout marche correctement, mais pour la deuxième "slidedroite" qui est censé être la même, mais de faire venir tout mon article depuis l'autre côté, elle ne fonctionne pas du tout.  
J'aimerais aussi faire en sorte que les animations ne s'affiche pas tous immédiatement au chargement de la page, mais seulement quand il apparaisse à l'écran. <
 
Si vous avez des solutions, je suis preneur, merci.

n°2436181
mechkurt
Posté le 20-12-2022 à 22:52:30  profilanswer
 

Ton slide droite anime de margin-right: 100%; à margin-left: 0%;
 
Pour ce qui est de déclencher l'animation au bon moment, a ma connaissance ce n'est pas possible en css pur, faut avoir un js avec un écouteur sur onscroll qui vérifie la position du truc pour voir si il est dans le viewport.
C'est très souvent utilisé pour des effets type parallax ou apparition mais c'est aussi assez gourmand en ressource donc plutôt mal vu...
 
Tu as wow.js par exemple pour ce genre de truc.
 


---------------
D3
n°2436289
firstoneee
Posté le 21-12-2022 à 18:46:00  profilanswer
 

Je ne comprends pas pour le slide de droit. J'ai essayé en faisait de margin-right: 100%; à margin-left: 0%; en faisant margin-leftt: 100%; à margin-right: 0%;. Il ne se passe rien, cela ne bouge pas. Il y a que quand je change le width: qu'il se passe un truc, mais là encore, c'est très bizarre, une partie du texte est déjà dans l'article et une autre partie arrive avec l'animation.

n°2436297
mechkurt
Posté le 21-12-2022 à 20:26:08  profilanswer
 

Les propriétés margin-left et margin-right sont aussi différente que width et height, donc tu n'animes rien du tout.
 
Si tu veux animer "une arrivée" par le coté il faut utiliser margin-left aussi bien pour les from et les to (et margin-right si tu veux renverser le mouvement).
Je t'ai fait un exemple : https://jsfiddle.net/ph24vztu/
 
Après le texte prend la place disponible par le bloc, ça donne un effet mais je ne suis pas sur que ce soit celui souhaité... ^^
 
Pour ce genre de cas je préférerais utiliser la propriété css transform:translate();.


---------------
D3
n°2436388
gatsu35
Blablaté par Harko
Posté le 23-12-2022 à 14:01:25  profilanswer
 

Pour info on peut cumuler les background dans la property background :  
 
background : url("image1.png" ), url("image2.png" ), red;


---------------
Blablaté par Harko

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Superposer deux background ? [CSS]

 

Sujets relatifs
Dimensionnement et placement CSSFaille de sécurité CSS
Divers - problème de formulaire HTML / CSS / JSBackground pas pris en compte
Aligner le background au milieu de l'imageorganisation CSS
[PHP] Problème stylesheet CSS indisponible sur une page (MODEL MVC)[CSS]Problème Mise en page
CSS qui modifie plusieurs sites contre mon gré..YouTube - problème CSS
Plus de sujets relatifs à : Superposer deux background ? [CSS]

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.063 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR