Comment avoir deux images d'arrière-plan. Un haut la bannière et le deuxième un arrière-plan texturé?

Je commence à travailler sur un site web. Je voudrais avoir deux images d'arrière-plan. L'un serait une image de la bannière en haut similaire à la bande gris sur le dessus de la pile de dépassement du site web. Puis l'autre image est une image que j'aurais à créer un arrière-plan texturé. Ce serait comme le blanc de l'espace sur ce site web, mais au lieu d'une couleur, il serait reproductible de l'image. Des sites web avec le look que je vais faire sont pinterest.com, subtlepatterns.com, Facebook.com, etc...

J'ai essayé beaucoup de choses différentes. J'ai essayé de mettre un fond dans la balise html dans le css. Cela ne fonctionne pas. J'ai aussi essayé de mettre deux images d'arrière-plan dans la balise body. Qui n'a pas fonctionné car il serait tout simplement de montrer la première. J'ai aussi essayé de créer l'arrière-plan dans sa propre classe. Mais quand je l'ai fait il ne voulait pas s'afficher du tout. Peut-être que j'ai laissé quelque chose hors de l'html?

Actuellement, j'ai des code Suivant:

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
background-image:url(../images/absurdidad.png);
background-repeat:repeat;
}

Cela a créé de l'arrière-plan principal image qui prend tout l'écran comme je le veux. Savoir si je pouvais ajouter le second juste au dessus pour que répéter horizontalement puis ça va être génial!

Merci d'avance pour l'aide.

double possible de puis-je avoir plusieurs images d'arrière-plan à l'aide de CSS?

OriginalL'auteur user1493824 | 2012-07-02

5

à l'aide de virgules, vous pouvez avoir plusieurs arrière-plan dans le même élément:
```
background-image: url('first'), url('second');
```
et la même règle s'applique pour les autres style:
```
background-position: top, bottom;
```
Et ainsi de suite.

Plus d'infos @ css3.info

Si vous voulez répandue prise en charge du navigateur, plusieurs DIVs est la seule façon de le faire:
```
<div class="one">
  <div class="two">
  </div>
</div>
```
Bonne chance!

Je ne savais pas que vous pouviez faire le background-position: en haut, en bas; c'est bon de savoir. Merci beaucoup pour l'aide!
C'est une nouvelle CSS3 😉

OriginalL'auteur Edouard Reinach
2

Le seul moyen que je connaisse pour ce faire est d'avoir plusieurs wrapper avec des étiquettes de fond qui leur sont associés. Par exemple:
```
<div style="background-image:url(../images/image1.png);">
    <div style="background-image:url(../images/image2.png);">
        
    </div>
</div>
```
Je l'avais mis dans la balise div et il n'a pas de travail, mais c'est parce que j'étais à côté du fait qu'il devait être un wrapper de la balise avec le "style". C'est génial! Merci beaucoup!
Eh bien, il n'a pas vraiment d'être, de mon point principal par l'illustration a été de mettre un div extérieure et intérieure de la div, chacun avec des images. J'ai utilisé la balise style ici pour coder en dur les images, mais vous pouvez également utiliser des classes css ou id, qui est en fait une meilleure pratique si vous insérez un lot d'images dans votre code.

OriginalL'auteur King Skippus
2

Voici un jsFiddle je viens de faire:
jsFiddle Bannière et Reproductibles à l'arrière-plan

CSS:
```
body{
    background-image:url("http://silviahartmann.com/background-tile-art/images/grunge-background-seamless-repeating.jpg");
    background-repeat: repeat;
    color: white;
}

#headerBackground{
   position: fixed;
   width: 100%;
   height: 50px;
   background-color: gray;
}

#headerContent {
    background-image: url(http://lorempixel.com/700/50/city/5);
    background-position: center center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    text-align: center;
}
```
HTML:
```
<div id="headerBackground">
    <div id="headerContent">Other Header Content</div>
</div>
```
Mise à jour: Révisé jsFiddle avec Hotlinkable reproductible image d'arrière-plan.

Vous êtes un génie!!! Merci!!!! Merci!!!! Il fonctionnait très bien! La seule chose que j'ai changé, c'était le #headerContent background-repeat pour répéter-x. C'était merveilleux! Je ne pouvais pas l'avoir fait sur mon propre! 🙂
Je vous remercie. Veuillez compléter le Stackoverflow Processus en acceptant cette Réponse puisqu'elle résout votre Question. Une fois que vous obtenez à 15rep points, alors vous pouvez aussi effectuer un Upvote (Cette réponse est utile), si cela s'applique aussi.

OriginalL'auteur arttronics
1

Cela vous aidera à Puis-je avoir plusieurs images d'arrière-plan à l'aide de CSS?

Vous pouvez utiliser CSS3 pour servir à de multiples origines ou de certains étiquette de la ruse pour le faire fonctionner.

OriginalL'auteur leopic

de la taille et de la position que vous pouvez ajuster.Ici image2 vais répéter.

background:url(image1.jpg),url(image2.jpg);
background-size:80px 60px;
-moz-background-size:80px 60px; /* Firefox 3.6 */
background-repeat:no-repeat,repeat;
background-position:top left,center center;

OriginalL'auteur Prashobh

Vous devez vous connecter pour publier un commentaire.