Establecer el tamaño de la imagen de fondo con CSS?


Answers

Solo CSS 3 lo admite,

background-size: 200px 50px;

Pero editaba la imagen en sí, de modo que el usuario necesita cargar menos, y podría verse mejor que una imagen encogida sin antialiasing.

Question

¿Es posible establecer el tamaño de la imagen de fondo con CSS?

Quiero hacer algo como:

background: url('bg.gif') top repeat-y;
background-size: 490px;

Pero parece que es totalmente incorrecto hacerlo así ...




Esto es posible hacer en CSS3 con fondo de tamaño

.backgroungImage {
    background: url('../imageS/background.jpg') no-repeat;
    background-size: 32px 32px;
}



Puede usar dos elementos <div> :

  • Uno es un contenedor (es en el que originalmente quería que aparezca la imagen de fondo).

  • El segundo está contenido dentro. Establece su tamaño al tamaño de la imagen de fondo (o el tamaño que desea que aparezca).

El div contenido entonces se configura para posicionarse como absolute . De esta forma, no interfiere con el flujo normal de elementos en el div que contiene.

Le permite usar imágenes de sprites de manera eficiente.




background-size: 200px 50px cámbialo al 100% 100% y escalará las necesidades de la etiqueta de contenido como ul li o div ... lo probé




put the below code in the body of you css file

background-image: URL('../images/wave-green-plain-colour.jpg') ;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width:100px;



No es posible El fondo siempre será tan grande como sea posible, pero puede evitar que se repita con background-repeat .

background-repeat: no-repeat;

En segundo lugar, el fondo no entra en el área de margen de un cuadro, por lo que si desea que el fondo solo se encuentre en el contenido real de un cuadro, puede usar margen en lugar de relleno.

En tercer lugar, puedes controlar dónde comienza la imagen de fondo. Por defecto es la esquina superior izquierda de un recuadro, pero puedes controlarlo con background-position , así:

background-position: center top;

o quizás

background-position: 20px -14px;

El posicionamiento negativo se usa mucho con los sprites de CSS .




Utilizo imágenes de fondo para botones, pero solo muestra la imagen del mismo tamaño que el texto, incluso si configuro ancho y alto. En cambio, relleno mi texto con &nbsp; personajes (espacios sin ruptura). De todas formas, introduzco tantas como sea necesario, hasta que aparece todo el fondo del botón. Entonces podría tener un código como este:

En la hoja de estilos:

#v2menu-home {
    background-image:url(../v2-siteimages/button.png);
    background-repeat:no-repeat;
}

En el documento HTML:

<div id="v2menu">
    <a id="v2menu-home" href="/index.php">home&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
</div><!-- v2menu -->



Si desea establecer background-size en la misma propiedad de background que puede usar, use:

background:url(my-bg.png) no-repeat top center / 50px 50px;



Solo tiene divs anidados para que sean compatibles con varios navegadores

   
      <div>
         <div style="background: url('bg.gif') top repeat-y;min-width:490px;">
            Put content here
         </div>
      </div>
   



Links