Fondos con hoja de estilos CSS, background

La propiedad background de CSS permite controlar el fondo de los elementos HTML. Incluye subpropiedades como background-color (color sólido), background-image (imagen de fondo), background-position, background-size, background-repeat y background-attachment, permitiendo crear diseños visuales atractivos y responsive.

Posición flexible del fondo

Consulta también los ejemplos de bordes en CSS y el redondeo interno con CSS para completar tu formación.

Extended background-position solution

div {
	background: url(https://csssecrets.io/images/code-pirate.svg)
	            no-repeat bottom right #58a;
	background-position: right 20px bottom 10px;
	
	/* Styling */
	max-width: 10em;
	min-height: 5em;
	padding: 10px;
	color: white;
	font: 100%/1 sans-serif;
}

background-origin solution

div {
padding: 10px;
background: url("code-pirate.svg") no-repeat #58a
bottom right; /* or 100% 100% */
background-origin: content-box;
	/* Styling */
	max-width: 10em;
	min-height: 5em;
	padding: 10px;
	color: white;
	font: 100%/1 sans-serif;
}

Solución calc()

div {
background: url("code-pirate.svg") no-repeat;
background-position: calc(100% - 20px) calc(100% - 10px);
}

Valoración:

Contenido Relacionado

Ejemplos de Bordes en CSS, como utilizarlos

Os explicamos como utilizar bordes con hojas de estilos con estos ejemplos prácticos que iremos...

Te puede interesar

Bordes CSS

Ejemplos prácticos de cómo usar bordes en CSS para mejorar tus diseños.

Redondeo CSS

Aprende a aplicar redondeo interno en elementos con CSS de forma sencilla.

Mejores frameworks responsive

Frameworks CSS esenciales para desarrollar sitios web adaptables y modernos.