Buenas buenas!!!!
Dejo mi código para la entrega CU01031D del programa formativo en desarrollo web con CSS desde cero.
Saludos!!!!!
ouch, había dejado las fotos apuntando a mi equipo :-)
CU01031D.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Background-position y más - Curso aprenderaprogramar.com</title>
<meta name="author" content="Hugo A. Segura" />
<meta name="description" content="background position size origin" />
<meta name="keywords" content="curso, aprender a programar, html, css, background-position,(CU01031D)" />
<meta charset="utf-8" />
<meta name="robots" content="index, follow" />
<link rel="stylesheet" type="text/css" href="CU01031D.css"/>
</head>
<body>
<div class="encabezado">
<h1>Resolución ejercicio (CU01031D)</h1>
<h2>Entrega número 31</h2>
</div>
<div id="foto1"></div>
<div id="foto2"></div>
<div id="foto3"></div>
<div id="foto4"></div>
</body>
</html>
CU01031D.css
/* Estilos aplicados al ejercicio entrega N1 26
aprenderaprogramar.com (CU01031D)*/
*{
font-family: Arial, sans-serif;
}
body{
background-color: beige;
}
/* estilos para los titulos*/
.encabezado{
text-align: center;
}
.encabezado h1{
margin: 0px;
}
/* estilos comunes para todos los div
de el ejercicio*/
#foto1,#foto2,#foto3,#foto4{
width: 400px;
height: 400px;
margin: 40px;
padding: 40px;
}
/* estilos especificos para cada div
de el ejercicio*/
#foto1{
border: dotted 10px;
background-color: #0000FF;
background-image: url(http://i.imgur.com/yEKfnHJ.jpg);
background-repeat: no-repeat;
background-position: center;
}
#foto2{
border: dashed 10px;
background-color: #4B3621;
background-image: url(http://i.imgur.com/YtYO8AZ.jpg);
background-repeat: no-repeat;
background-position:166px; /*x=anchodiv-anchoimagen-border-padding // la pos y la calcula el navegador*/
background-position: center;
}
#foto3{
border-style: solid double;
border-width: 10px;
background-color: #287233;
background-image: url(http://i.imgur.com/AZ8m2VY.jpg);
background-repeat: no-repeat;
background-position: 116px 140px;
}
#foto4{
border: inset 10px;
background: #FF0000 url(http://i.imgur.com/c2JQdc7.jpg) no-repeat 50% 50%;
}
Tema: CSS Y HTML centrar una imagen dentro de un div background-position CU01031D (Leído 2183 veces)
RSS -
WAP2