Superposition d'un arrière-plan en utilisant le modèle dans les CSS

J'ai utilisé les suivants fichier css à l'arrière-plan, la bg.jpg avec un repeat-x repeat-y modèle de dots.png.

*{
    margin: 0;
    padding: 0;
}
body {
    margin: 0px;
    padding: 0px;
    color: #666;
    font-family: comfortaa;
    font-size: 13px;
    line-height:1.5em; 
    background-color: #fff;
    width: 100%;
    height: 100%;
    background: url(../images/bg.jpg) no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
#header {
    width: 100%;
    height: 17%;
    background: url(../images/header.png) no-repeat;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
}
#dots{  
    width:100%;
    height:100%;
    position:fixed;
    top:0px;
    left:0px;
    background:transparent url(../images/dots.png) repeat-x repeat-y top left;
    opacity:0.6;
}

Ensuite, j'ai écrit le index.php comme ceci:

<html>
<head>
    <title>My test page</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
</head>
<body>
   <div id="header"></div>
   Under Construction
   <div id="dots"></div>
</body>
</html>

Mais le motif n'est pas la superposition. Que puis-je faire pour résoudre ce problème? S'il vous plaît aider.

  • Vous allez nous aider si vous préparez un jsfiddle.net pour nous. Et quelqu'un m'a récemment parlé d'placekitten pour la démo de milieux 🙂
  • Merci pour le vote, je me demandais si cela a fonctionné ou pas.
InformationsquelleAutor Harikrishnan | 2012-06-17
  1. 1

    C'est juste { background: repeat; }, il n'-x et-y.

    http://jsfiddle.net/XNeDK/

    • toujours pas de chance. repeat-x et repeat-y est ok avec les css par la voie
    • N'avait-il sur jsfiddle lien que j'ai fourni? Comme Liyan mentionnés ci-dessous, à l'aide de deux -x et-y n'est pas valide CSS. répétez l'est par défaut, mais si vous écrasez autre chose que vous aurez besoin de cours.
    InformationsquelleAutor shannon
  2. 2

    Changement: 

    background:transparent url(../images/dots.png) repeat-x repeat-y top left;

    à:

    background:transparent url(../images/dots.png) top left;

    Le comportement par défaut est de renouveler à la fois de x et de y; en lui donnant les deux paramètres est en fait incorrect.

    Voici un JSFiddle pour la voir en action: http://jsfiddle.net/XsDjy/

    InformationsquelleAutor Liyan Chang
  3. 1

    Height: 100% est comme 0px si vous ne remplissez pas quelque chose à l'intérieur de la div... donc je vous suggère de donner une hauteur fixe, 1px ainsi suffit de voir le nombre de points.

    • toujours pas de chance, j'ai fait la 1px de hauteur, de la largeur de 1px. même essayé avec 1024px
    • supprimer repeat-x, repeat-y et d'ajouter que le repeat.
    InformationsquelleAutor Andrea Turri