css3 background ajustar - Establecer tamaño en la imagen de fondo con CSS?





9 Answers

Solo CSS 3 soporta eso,

background-size: 200px 50px;

Pero editaría la imagen en sí misma, de modo que el usuario necesite cargar menos, y podría verse mejor que una imagen reducida sin antialias.

html como poner

¿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í ...




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 del margen de un cuadro, por lo que si desea que el fondo solo esté en el contenido real de un cuadro, puede usar el margen en lugar del relleno.

En tercer lugar, puede controlar dónde comienza la imagen de fondo. Por defecto, es la esquina superior izquierda de un cuadro, pero puede controlarlo con background-position , de esta forma:

background-position: center top;

o quizás

background-position: 20px -14px;

El posicionamiento negativo se usa mucho con sprites CSS .




background-size: 200px 50px cámbielo a 100% 100% y se ajustará a las necesidades de la etiqueta de contenido como ul li o div ... probé




Solo tienes que anidar divs para que sean compatibles con los navegadores

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



Puedes usar dos elementos <div> :

  • Uno es un contenedor (es el que originalmente deseaba que apareciera la imagen de fondo).

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

El div contenido se establece entonces para ser posicionado absolute . De esta manera, no interfiere con el flujo normal de elementos en el div que contiene.

Le permite utilizar imágenes de sprite de manera eficiente.




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;



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

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



Utilizo imágenes de fondo para los botones, pero solo muestra la imagen del mismo tamaño que el texto, incluso si configuro el ancho y la altura. En su lugar, relleno mi texto con &nbsp; Caracteres (espacios sin ruptura). Insisto en tantos como sea necesario, básicamente, hasta que aparezca todo el fondo del botón. Así que podría tener un código como este:

En la hoja de estilo:

#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 -->



Esto es posible hacerlo en CSS3 con tamaño de fondo.

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



Related


Tags

css   css3