IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Multiple background et repeat ?


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Homme Profil pro
    Webmaster
    Inscrit en
    Octobre 2012
    Messages
    29
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : Octobre 2012
    Messages : 29
    Par défaut Multiple background et repeat ?
    Bonjour,

    En lisant le forum j'ai trouvé comment mettre mes 4 images constituant mon background dans un seul conteneur, je tape donc le code suivant:
    Code : 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
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    <!doctype html>
    <html>
    <head>
    	<style>
    		body {background-color: black; color:white}
    		.multipleBackground {
    			border:2px solid green;
    			margin: auto;
    			padding: 100px 0 150px;
    			width:960px;
    			background:
    				url(./Images/BG_MainTitle.png) center 0 no-repeat,
    				url(./Images/BG_MainContainerTop.jpg) center 91px no-repeat,
    				url(./Images/BG_MainContainerMiddle.jpg) center 595px no-repeat,
    				url(./Images/BG_MainContainerBottom.jpg) center bottom no-repeat;}
    				/*url(https://lh5.googleusercontent.com/-UUpp2afMCac/UJPCdgpw3pI/AAAAAAAABK8/Jd5O9KpOymY/s885/BG_MainTitle.png) center 0 no-repeat,
    				url(https://lh5.googleusercontent.com/-4gEIg4SEnZM/UJPCdKtc_kI/AAAAAAAABLE/hdamuDclMbE/s889/BG_MainContainerTop.jpg) center 91px no-repeat,
    				url(https://lh4.googleusercontent.com/-ZGxQ2v-lcVk/UJPCcwFmlCI/AAAAAAAABK0/ssh7o30yGrk/s959/BG_MainContainerMiddle.jpg) center 595px repeat-y,
    				url(https://lh5.googleusercontent.com/-wnikg72rZTM/UJPCc-bN4oI/AAAAAAAABLA/vS2BLT-fjCE/s887/BG_MainContainerBottom.jpg) center bottom no-repeat;}*/
    		#navbar {
    			height:30px;
    			border:2px solid blue}
    		#content {
    			margin: 90px 60px 0;
    			border:2px solid white}
    	</style>
    </head>
    <body>
    	<div class="multipleBackground">
    		<div id="navbar">
    		</div>
    		<div id="content">
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		</div>
    	</div>
    </body>
    </html>
    Les bordures colorées sont temporaires. Tout marche comme je le voulait, c centré, le background de fond se "déplace" bien avec la longueur du contenu tout va bien .... sauf le milieu.

    Le milieu est une simple bande extraite du background bottom que je pensait faire un repeat-y dans le code mais...
    ... le repeat-y me copie cette bande TOUT du long du haut de la fenêtre jusqu'en bas ! alors que je ne veut qu'il me remplisse juste le milieu...

    et ca, ce n'est pas dans la FAQ du multibackground.

    quelqu'un aurait-il une solution svp ?
    Images attachées Images attachées  

  2. #2
    Membre averti
    Homme Profil pro
    Webmaster
    Inscrit en
    Octobre 2012
    Messages
    29
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : Octobre 2012
    Messages : 29
    Par défaut
    J'ai essayé une variante : l'idée serait un hack en mettant le fond de milieu dans un div placé en arrière-plan par rapport au div principal.
    Code : 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
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    <!doctype html>
    <html>
    <head>
    	<style>
    		body {background-color: black; color:white}
    		.multipleBackground {
    			border:2px solid green;
    			margin: auto;
    			padding: 100px 0 150px;
    			width:960px;
    			background:
    				url(./Images/BG_MainTitle.png) center 0 no-repeat,
    				url(./Images/BG_MainContainerTop.jpg) center 91px no-repeat,
    				url(./Images/BG_MainContainerBottom.jpg) center bottom no-repeat;}
    				/*url(https://lh5.googleusercontent.com/-UUpp2afMCac/UJPCdgpw3pI/AAAAAAAABK8/Jd5O9KpOymY/s885/BG_MainTitle.png) center 0 no-repeat,
    				url(https://lh5.googleusercontent.com/-4gEIg4SEnZM/UJPCdKtc_kI/AAAAAAAABLE/hdamuDclMbE/s889/BG_MainContainerTop.jpg) center 91px no-repeat,
    				url(https://lh4.googleusercontent.com/-ZGxQ2v-lcVk/UJPCcwFmlCI/AAAAAAAABK0/ssh7o30yGrk/s959/BG_MainContainerMiddle.jpg) center 595px repeat-y,
    				url(https://lh5.googleusercontent.com/-wnikg72rZTM/UJPCc-bN4oI/AAAAAAAABLA/vS2BLT-fjCE/s887/BG_MainContainerBottom.jpg) center bottom no-repeat;}*/
    		.MiddleBG {
    			border:2px solid Magenta;
    			margin: 595px auto 150px;
    			width:960px;
    			z-index:-1;
    			background: url(./Images/BG_MainContainerMiddle.jpg) center repeat-y
    		}
    		#navbar {
    			height:30px;
    			border:2px solid blue}
    		#content {
    			margin: 90px 60px 0;
    			border:2px solid white}
    	</style>
    </head>
    <body>
    	<div class="multipleBackground">
    		<div id="navbar">
    		</div>
    		<div id="content">
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		bla<br/>
    		</div>
    	</div>
    	<div class="MiddleBG"/>
    </body>
    </html>
    Mais ca n'a pas l'air de marcher non plus... (et c'est loin d'être propre comparé à un div unique)

    Sinon l'autre idée serait de placer le fond du milieu dans un border-image, mais je n'y arrive pas non plus...

  3. #3
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 207
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 207
    Par défaut
    Bonjour,
    ... le repeat-y me copie cette bande TOUT du long du haut de la fenêtre jusqu'en bas ! alors que je ne veut qu'il me remplisse juste le milieu...
    Attention : l'ordre de déclaration des images de fond est TRES IMPORTANTE, la première déclarée est placée sur le dessus, la suivante dessous et ainsi de suite.

    Dans ton cas l'image du bottom devrait être déclarée avant celle du centre.

    Toutes les infos Layering Multiple Background Images

  4. #4
    Membre averti
    Homme Profil pro
    Webmaster
    Inscrit en
    Octobre 2012
    Messages
    29
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : Octobre 2012
    Messages : 29
    Par défaut
    Je sais, le problème n'est pas là.

    Les backgrounds de top et bottom ont des zones transparentes qui devraient donc afficher le noir du background-color du body.
    Le hic c'est que le repeat-y du background Middle fait apparaître la bande répétée derrière ces zones transparentes, et c'est TRES moche (cf. image jointe).

    Je cherche donc à limiter la répétition de cette bande mais comment ??!

    EDIT: j'ai réussi à remplacer la zone transparente du background-bottom par noir donc ca masque les bandes répétées du background Middle en bas du div. Par contre peut pas le faire sur le background-top car ca bousille l'image...)
    Images attachées Images attachées  

  5. #5
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 207
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 207
    Par défaut
    c'est TRES moche (cf. image jointe).
    Oui, bon, ma foi...attendu que je ne sais pas ce que tu souhaites réellement comme rendu je préfère en rester là.

  6. #6
    Membre averti
    Homme Profil pro
    Webmaster
    Inscrit en
    Octobre 2012
    Messages
    29
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : Octobre 2012
    Messages : 29
    Par défaut
    Citation Envoyé par NoSmoking Voir le message
    Oui, bon, ma foi...attendu que je ne sais pas ce que tu souhaites réellement comme rendu je préfère en rester là.
    Ma foi... ca fait 4 jours que je me remet en cause sans arrêt pour comprendre en quoi mon message (idem pour celui de bordure dégradé) n'obtient aucune réponse... sans trouver ce qui "manque" aux explications.

    Pourtant j'ai joint 2 messages avec explications reformulées et images jointes montrant clairement le gros trou vide de la première image rempli par une bande en repeat-y dans la seconde image. Ca c'est ce que je souhaite.
    MAIS la seconde image montre que cette bande se répète "trop loin" et ca se voit en haut de la seconde image. CA je n'en veut pas. Comment faire ?

    Dites moi ce que VOUS ne comprenez pas et j'essaierai d'adapter mes explications, svp.

    Là actuellement je m'en suis tiré avec une solution temporaire utilisant 6 divs, 1 règle javascript pour gérer la hauteur changante et of course un CSS bien lourd qui va avec...j'aimerait apprendre à faire cela plus proprement, et cela ferait un bel ajout pour votre faq multi-background.

Discussions similaires

  1. Multiple Background pour un GridView
    Par scopion dans le forum Android
    Réponses: 0
    Dernier message: 29/11/2010, 11h29
  2. Background no repeat qui "repeat" quand même
    Par mariepierre dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 15/09/2010, 14h32
  3. background image repeat-x
    Par wind_vinch dans le forum Mise en page CSS
    Réponses: 8
    Dernier message: 23/09/2007, 13h19
  4. background sans repeat
    Par PuppeT mAsTer dans le forum Balisage (X)HTML et validation W3C
    Réponses: 1
    Dernier message: 22/06/2006, 11h31

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo