Bonjour,

J'ai créée une image svg que je voudrais utiliser en background pour le body de ma page.

Le probème est que quand je visualise le SVG directement sur mon browser, il est entier et quand je la met en background avec du css, le côté gauche de l'image est coupé.....

Le code css :

body.body_test
{
    background-image: url('../img/accueil/monsvg.svg'), linear-gradient(180deg, #f8f8fa, #eff1f8);
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position:right, left; 
}

Quelqu'un a t'il déjà eu ce problème ?

Merci pour vos rep ;-)

Bonjour,

Le problème doit venir de ton conteneur et non pas de ton image, il faut que tu modifie les propriété de ta classe " .body_test " et de ton bloc " body " en faisant en sorte qu'il prenne tout l'espace de la page. Si tu n'es pas sûr que le problème viens de là, fait F12 sur ta page, puis dans l'onglet Inspecteur clic sur tes blocs pour voir s'ils prennent bien tout l'espace.

Bonjour,

Merci pour ta rep !

Le body prend toute la largeur.

En fait l'image est placée en background, donc je ne comprend pas pourquoi elle est coupée....:-/

Oui le body est bien sur toute la largeur

Bon du coup  j'ai trouvé une solution bricolage !
Le post de Y@cine m'a mis la puce à l'oreille !

J'ai modifié le css comme ça :

    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: 30vw;
    background-color: #fff;

-
Edité par bencoandco 12 avril 2019 à 18:21:38

Content pour toi

Pense à mettre ton sujet en résolu !