28111 sujets

CSS et mise en forme, CSS3

[Résolu] Background image

Bonjour

Je débute et ma réflexion n est peut être pas la bonne.

Je cherche à afficher une image sur 75% de la largeur de ma div au format qu elle occuperait si elle était positionnée en background-size: cover;avec ses 25% à gauche supprimés, tout du moins invisible.

Donc j affiche l image en utilisant l exemple https://www.alsacreations.com/astuce/lire/1216-arriere-plan-background-extensible.html

Ma réflexion n est peut être pas correcte mais elle est la suivante :

Pour masquer 25% de cette image je peux :
- superposer une image qui reprend ma couleur de fond sur 25% de la largeur de la div et une répétition verticale pour couvrir 100% de la hauteur.
ou
- créer une div de la couleur de fond de la page sur 25% de la div et 100% de la hauteur

mais tout cela m oblige à jouer avec les z-index mais peut être existe il une autre solution plus propre et 'déclarable' dans la classe de ma div

Tous les conseils sont les bienvenus

Merci de votre aide
Modifié par rooky06 (31 May 2019 - 00:44)
Ah ok, bon perso je viens de tester et je suis comme toi, je me sers de z-index pour arriver à ce résultat.

Après étant donné que tu as un exemple en ligne, en regardant le code source html et css tu devrais y arriver (je garde le lien sous le coude pour regarder plus en détails Smiley cligne )

++
Merci d avoir pris le temps de me repondre.
J ai bien tenté de lire le css de la page mais c est franchement fouillis

Par contre la solution est bien plus simple que ce que j imaginais avec les z-index.
les images de fond multiples:
mon image de fond en cover et une image de 1px que j étire à 25% de large et 100% de haut.
(pour le 100% de haut pas de pb là où je peche c est pour les 25% de large mais je teste des demain)

pour les images multiples :
http://css.mammouthland.net/css3/plusieurs-background-image-sans-div.php

pour la taille
https://cssreference.io/property/background-size/
bon j ai pas pu attendre et c est fait, ça fonctionne:
background-image: url(../img/background/pixel.jpg), url(../img/background/home.jpeg);
    background-repeat: no-repeat, repeat-y;
    background-size: 25% 100%, cover;
Meilleure solution
Sujet clos
Aller à