web-dev-qa-db-fra.com

css avec l'image d'arrière-plan sans répéter l'image

J'ai une colonne (supposons que la largeur est de 40 pixels) et là j'ai quelques lignes. La hauteur des lignes dépend de la longueur du texte (si le texte est long, il y a une ligne de rupture et donc la hauteur augmente).

Maintenant, je veux afficher une icône dans chaque ligne à côté du texte pour montrer à l'utilisateur par exemple qu'il a déjà terminé quelque chose dans cet onglet. J'essayais donc de résoudre ce problème en utilisant uniquement CSS. Donc, si l'utilisateur remplit un onglet, je change le CSS de cette ligne. Cependant, je ne peux pas ajouter à cette ligne une image sans que l'image soit répétée.

J'utilise ce code CSS:

padding: 0 8px;
padding-top: 8px;
padding-right: 8px;
padding-bottom: 8px;
padding-left: 8px;
overflow: hidden;
zoom: 1;
text-align: left;
font-size: 13px;
font-family: "Trebuchet MS",Arial,Sans;
line-height: 24px;
color: black;
border-bottom: solid 1px #BBB;
background-color: white;
background-image: url('images/checked.gif');
background-repeat-x: no-repeat;
background-repeat-y: no-repeat;

Est-ce que quelqu'un sait comment faire ça?

cssbackground-image
25
mkn

Au lieu de

background-repeat-x: no-repeat;
background-repeat-y: no-repeat;

ce qui n'est pas correct, utilisez

background-repeat: no-repeat;
68
MOleYArd
body {
    background: url(images/image_name.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Voici une bonne solution pour que votre image couvre parfaitement toute la zone de l'application Web

21
laffan

Essaye ça

padding:8px;
overflow: hidden;
zoom: 1;
text-align: left;
font-size: 13px;
font-family: "Trebuchet MS",Arial,Sans;
line-height: 24px;
color: black;
border-bottom: solid 1px #BBB;
background:url('images/checked.gif') white no-repeat;

Ceci est complet css .. Pourquoi vous utilisez padding:0 8px, puis le remplacer par des rembourrages? Voilà ce dont vous avez besoin ...

6
Chuck Norris

C'est tout ce dont vous avez besoin:

background-repeat: no-repeat;
4
DanielB