2011-11-07 24 views
24

Tengo una columna (supongamos que el ancho es 40px) y allí tengo algunas filas. La altura de las filas depende de la longitud del texto (si el texto es largo, entonces hay una línea de corte y, por lo tanto, la altura aumenta).css con imagen de fondo sin repetir la imagen

Ahora quiero mostrar un icono en cada fila al lado del texto para mostrar al usuario, por ejemplo, que ya ha completado algo en esa pestaña. Así que estaba tratando de resolver esto usando solo CSS. Entonces, si el usuario completa una pestaña, entonces cambio la CSS de esa fila. Sin embargo, no puedo agregar a esa fila una imagen sin que la imagen se repita.

estoy usando el código 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; 

¿Alguien sabe cómo hacer eso?

Respuesta

65

En lugar de

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

que no es correcta, utilice

background-repeat: no-repeat; 
4

Esto es todo lo que necesita:

background-repeat: no-repeat; 
6

Prueba este

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; 

Esto es css completo .. ¿Por qué usa padding:0 8px, y luego lo reemplaza con almohadillas? Esto es lo que necesita ...

11
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; 
} 

Aquí es una buena solución para obtener su imagen para cubrir el área completa de la aplicación web perfectamente

Cuestiones relacionadas