Propiedad background-origin

Esta propiedad usa las palabras clave border-box, padding-box y content-box para dar a la imagen una ubicación relativa con respecto al borde del elemento, su margen interno, o su contenido.

border-box el origen de coordenadas de la imagen será el borde del elemento. Estamos indicando que la imagen empieza donde empieza el borde del elemento, si es que tiene borde.

@charset "utf-8";

/* CSS Document */

body {

text-align:center;

}

#inicio{

display:block;

width: 500px;

margin: 50px auto;

padding: 15px;

border: 2px solid #000000;

background-image:url(../fondo11.jpg);

background-size: 100px;

background-repeat:no-repeat;

background-origin:border-box;

}

#titulo{

font: bold 36px verdana, sans-serif;

}

padding-box es el utilizado por defecto en CCS3 y es tal como se posiciona la imagen en navegadores que sólo entienden CSS2 o inferior. Con esta indicación queremos que el eje de coordenadas de la imagen sea el espacio destinado al elemento, incluyendo su posible padding y sin contar el posible borde.

content-box sirve para que el origen de coordenadas de la imagen de fondo sea el lugar donde empieza el contenido del elemento, sin tener en cuenta sus posibles bordes y padding.