Partage

CSS: Mon background se répête

17 juin 2018 à 18:21:15

Salut, j'ai un problème simple mais sans solution: Lorsque j'utilise la propriété linear-gradient ou radial-gradient sur mon body, alors mon body se répête vers la droite et vers la gauche. C'est encore plus flagrant sur mobile. Ce qui fais quand gros si par exemple je fais un radial-gradient circle, je vais pas avoir un seul cercle mais 3 cercles horizontalement et 3 verticalement soit 3*3= 9 cercles.

La seule manière que j'ai trouvé pour régler ça est de modifier la taille et/ou la largeur de mon body mais c'est très étrange je n'ai jamais eu à faire ça avant, puis ça règle pas le problème sur les smartphone on dirais.

YoshiiSenpai

18 juin 2018 à 5:33:49

Coucou,

Dotsuka a écrit:

j'ai un problème simple mais sans solution

Pas de solution, pas de problème.

Plus sérieusement, sans le moindre code, qu'est ce que tu attends de nous au juste ? De plus, pour ma part, j'ai rien compris à ton histoire de body qui se répète. o_O

cyp86

19 juin 2018 à 7:19:52

Bonjour,

Le background se répète ou le body ? Si c'est un problème de background regarde la propriété background-repeat

Am I dev ? 0x90

Alex Lemaire

19 juin 2018 à 17:46:47

Bonjour, c'est le background qui se répête, un screen sera peut être plus parlant, voici le site sur téléphone:

Le bug est invisible sur ordi mais ça m'est déjà arrivé de l'avoir sur ordi aussi dans le passé

J'ai déjà essayé de faire un background-repeat: no-repeat mais ça ne change rien (logique, cette propriété ne s'applique qu'aux images de fond non ?) Je précise que tout ça est réglable facilement en modifiant simplement la largeur ou la taille du body MAIS ça me parait absurde de devoir faire une telle chose..

Ici mon code css est un simple: background: radial-gradient (circle, black, blue, grey)

Edit: J'ai rien dis le background no repeat marche mais du coup je n'ai qu'un cercle en haut à gauche et le reste de la page est blanche et encore une fois la seule solution est de modifier la taille du body

-
Edité par Alex Lemaire 19 juin 2018 à 17:48:54

cyp86

19 juin 2018 à 18:04:21

Tu peu mettre le body en margin 0, padding 0, width 100%, et background-size 100%. Cette propriété sert à ça.

édit: j'ai oublié de préciser que la taille de ton body en hauteur doit être défini de façon absolue si celui-ci ne fait pas toute la hauteur d'un écran (en terme de résolution je parle) je te conseil donc de mettre "min-height; avec une valeur en px ou de faire une feuille de style pour les très grands écrans.

édit bis: je serais curieux de voir le code complet de ton site, il ne ma pas l'air très adapté pour être responsive. A tu utiliser des flexbox et valeurs relatives ?

-
Edité par cyp86 19 juin 2018 à 18:18:17

Am I dev ? 0x90

Tpercher

19 juin 2018 à 19:30:41

Dans le CSS, met un background-repeat:no-repeat; a ton image et c'est bon

cyp86

19 juin 2018 à 19:38:44

Theo09/02/1997 a écrit: > Dans le CSS, met un background-repeat:no-repeat; a ton image et c'est bon

Bonjour,

ce n'est pas une image, merci de lire le sujet avant de poster
cette solution a déjà été mentionné plus haut (et qui plus est par moi)

Merci de lire le sujet et les solutions déjà envisagées pour le résoudre avant de poster ;p .

-
Edité par cyp86 19 juin 2018 à 19:40:00

Am I dev ? 0x90

Tpercher

19 juin 2018 à 20:42:00

Désolé cyp86 mais comme il post pas son code, on sait pas ce que c'est son "background" alors je vais te laisser trouver la solution ;p

D'ailleurs je sais pas vous mais moi j'ai jamais eu de background avec ces motifs alors forcément on pense à une image 👍

aero15

19 juin 2018 à 20:43:52

As-tu déjà essayé de mettre cette balise dans le <head> :

<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0">

-
Edité par aero15 19 juin 2018 à 20:44:10

Dom@art

19 juin 2018 à 20:51:04

Pour moi, le mieux est de mettre en CSS background: url('adressedubackground') no-repeat;

Alex Lemaire

19 juin 2018 à 22:27:07

J'ai déjà les balises viewport dans mon head.

Comme je l'ai dis plus haut, si je fais no repeat, ça fais que je n'ai qu'un background en haut à gauche de ma page et le reste en page blanche (comme avec une image de background enfait). J'ai essayé avec background-size et width sur le body 100%, ça ne change rien:

En ajoutant le background: no repeat ça donne ça:

Je ne suis pas très fort en responsive design malgré que j'ai déjà lu le cours d'OC alors si vous pouvez me donner qq indications pour ça... j'utilise déjà des viewport dans mon code html:

<meta name="viewport" content="width=device-width"/>
<meta name="viewport" content="height=device-height, initial-scale=0.45"/>

à savoir que si je ne met pas le viewport height la répétition est encore plus accentuée (ça se repete 4 fois de chaque côté au lieu de 2)

Mon code css n'a rien d'exceptionnel mais bon si vous le voulez (c'est le CSS de ma template de base, il y a un autre fichier css pour ce qui se trouve en millieu de page)

Les ids:

#piano1/2: mes images, #baniere1: l'image horizontale sous mon titre, #title: un div qui entoure mon titre, #titleText: un paragraphe contenant mon titre

body{
	background: linear-gradient(to right, blue, red);
	background-size: 100%;
	width: 100%;
	background-repeat: no-repeat;
	font-style: italic;
	font-family: URW Chancery L, cursive;
}

#title{
	position: relative;
	height: 100px;
	width: 800px;
	background: linear-gradient(to right, aqua,purple,black,blue,aqua);
	text-align: center;
	color: #FFFFFF;
	left: 375px;
	border: 6px double white;
}
#titleText{
	font-weight: normal;
	font-style: italic;
}

#piano1{
	position: relative;
	bottom: 200px;
	left: 20px;
	height: 200px;
	width: 250px;
	border: 4px solid red;
	border-radius: 10px 0px;
}
#piano2{
	position: relative;
	bottom: 410px;
	left: 1250px;
	height: 200px;
	width: 250px;
	border: 4px solid red;
	border-radius: 0px 10px;
}
#baniere1{
	position: relative;
	width: 800px;
	height: 105px;
	left: 375px;
	top: 1px;
	bottom: 105px;
	border: 4px double white;
}

cyp86

19 juin 2018 à 23:53:31

Le problème viens de la mise en page des autres éléments :

1. Vérifie ton code HTML et au besoin poste le ici pour qu'il sois vérifier (si tu veux t'aider, tu peu le faire valider ici)

2. Évite au maximum de mettre des positionnements absolu.

3.Utilise flexbox au maximum, cela facilitera ta mise en page.

Comme tu peu le constater sur l'image ci dessous, en copiant-collant ton code dans un éditeur en ligne, cela fonctionne très bien, le problème viens donc du reste de ta mise en page.

Si tu souhaite plus d'aide, merci de poster le code HTML et le reste du code CSS car le/les problèmes viens-nent d’ailleurs.

Am I dev ? 0x90

Alex Lemaire

20 juin 2018 à 0:04:46

Je n'utilise aucun positionnement absolu, que des positionnements relatifs. Voici le code html de mon base.html qui est associé au css que j'ai mis plus haut(j'utilise le moteur de template twig):

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width"/>
	<meta name="viewport" content="height=device-height, initial-scale=0.45"/>
	<title>{% block title %}{% endblock %}</title>
	{% block stylesheets %}{% include 'FormBundle:Form:mycss.css.twig' %}{% endblock %}
	{% block style %}{% endblock %}
</head>
<body>
	<h1 id='title'><p id='titleText'>Piano Passionnément</p></h1>
	<a href='https://www.youtube.com/channel/UC96_UMVIOXT8EWP-_yguMWQ/videos?sort=dd&shelf_id=0&view=0' target="Yt"><img src="{{ asset('bundles/images/baniere1.png') }}"id='baniere1'></a><br>
	<img src="{{ asset('bundles/images/piano2.jpg') }}"id='piano1'><br>
	<img src="{{ asset('bundles/images/piano4.jpg') }}"id='piano2'><br>
	{% block body %}{% block centre %}{% endblock %}{% endblock %}
</body>
</html>

Le code twig d'une de mes templates au hasard (prenons celui de la page d'acceuil que j'ai montré):

{% extends 'layout.html.twig' %}
{% block title %}Acceuil{% endblock %}
{% block style %}
	{% stylesheets '@FormBundle/Resources/css/acceuil.css' %}
	<link rel="stylesheet" type="text/css" href="{{ asset_url }}">
	{% endstylesheets %}
{% endblock %}


{% block body %}
{% block centre %}<div class='centre'>
<div class='INcentre'> Bienvenue sur la page de Piano Passionnément ! Ce site est un lieu où pourront se réunir tous les passionnés de musique et en particulier de Piano. Des vidéos venant directement de la chaine youtube "Piano Passionément" seront régulièrement ajoutées afin de vous faire partager notre passion de la musique ! </div></div>
{% endblock %}


<a href='inscription' class='button'>Inscris-toi !</a>
<a href='connexion' class='button'>Connectes-toi !</a>
<a href='videos' class='button'>Va voir nos vidéos !</a><br>
<a href='chat' class='button' id='chat'>Accèdes au chat !</a>
{% endblock %}

Le code css associé à la template acceuil:

.centre{
	background: linear-gradient(to right, white,black,white,black,white,black,white,black,white,black,white,black,white,black,white,black,white,black,white,black);
	border: 6px double white;
	height: 175px;
	width: 800px;
	position: relative;
	text-align: center;
	left: 375px;
	bottom: 350px;
	color: #FFFFFF;
	font-weight: bold;
}
.INcentre{
	background-color: black;
}
.button,.button:visited{
	position: relative;
	left: 450px;
	bottom: 300px;
	margin-right: 75px;
	padding: 3px;
	text-decoration: none;
	color: black;
	font-size: 23px;
	border: 6px double black;
	background-color: white;
	border-radius: 10px 10px;
}

#chat{
	position: relative;
	left:660px;
	bottom: 230px;
}

Puis-je savoir ce qu'est "flexbox" ? Je n'ai jamais entendu parler de ça dans les cours CSS que j'ai suivi

EDIT: Vu que tu ne l'a pas précisé je le répête mais tu sembles avoir fait ton teste sur ordinateur alors que mon "bug" n'est visible QUE sur téléphone

-
Edité par Alex Lemaire 20 juin 2018 à 0:09:13

cyp86

20 juin 2018 à 0:41:51

Voici un lien du cours HTML5/CSS3 pour flexbox.

Dotsuka a écrit:

height: 175px;
width: 800px;
left: 375px;
bottom: 350px;
margin-right: 75px;

Je te déconseille de mettre les unités en px mais plutôt en % ce n'est pas une unité responsive, pareille pour font-size, on préférera em a px.

Quant au positionnement, je cite pour faire plus simple, "Ajouter les propriétés top, right, bottom et left à un élément positionné en relative va le placer ailleurs que sa position normale. Le reste du contenu ne sera pas ajusté pour prendre la place dans l'espace laissé par l'élément. " donc ton fond gradient n'est pas adapté aux éléments a droites, ils sont "en dehors" de sa boite si tu veux. (source)

Je te conseille de lire/relire cette partie du cours HTML5/CSS3 (au besoin) pour bien comprendre le modèle des boites et de mettre des border à tes éléments pour "débuger" les éventuels débordements de contenu.

ÉDIT : par acquis de conscience, voici ledit test sur téléphone -non émulé- (ça marche comme tu peu le voir, les fonts gradients ne sont pas une nouveauté de CSS, ça fait bien longtemps que ça éxiste et donc que ça a eu le temps d'être intégré, je t'invite a te rendre sur cette url -temporaire- pour tester sur ton appareil ci cela fonctionne bien.) :

-
Edité par cyp86 20 juin 2018 à 1:06:42

Am I dev ? 0x90