Definición de fondo CSS. background-image. Efecto fondo página web. background-repeat. Ejemplos (CU01030D)
Aquí están las siguientes actividades:
1) Crea un documento HTML con 4 elementos div de 250 píxeles de ancho y 250 píxeles de alto, todos ellos con un margin de 30 píxeles en todas direcciones y un padding de 30 píxeles en todas direcciones. En cada uno de los elementos div coloca una imagen de fondo diferente y un background-color diferente.
Código HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Propiedades de Background-image</title>
<link rel="stylesheet" type="text/css" href="Background-image.css">
</head>
<body>
<h2><em>Se hace uso de repeat-y</em></h2>
<div id="Div1">División 1</div>
<div id="Div2">División 2</div>
<div id="Div3">División 3, este es mas grande</div>
<div id="Div4">División 4</div>
</body>
</html>
Código CSS
/*Para el titulo*/
h2{border: 5px double #890000; background-color: #AAA; width: 300px;
margin: 20px 0 0 30px; color: #00065B;}
/*Datos generales para los DIV*/
#Div1, #Div2,
#Div3, #Div4{width: 250px; height: 250px;
margin: 30px; padding: 30px;
border-style: none solid none solid; border-color: #000;
font-weight: bold; font-size: 3em; background-repeat: repeat-y;}
/*Caracteristicas para cada DIV*/
#Div1{background-image: url(https://lh5.googleusercontent.com/-bAOzI95phGk/Ujg8_DKMo3I/AAAAAAAAAVE/qO8yAzEbSd8/s134/CU01030D_2.jpg);
background-color: #F00; color: #FF0;}
#Div2{background-image: url(https://lh5.googleusercontent.com/-pmos9pcSVh0/Ujg8_DkwrGI/AAAAAAAAAVA/Tph2ibmo6n4/s134/CU01030D_3.jpg);
background-color: #FF0; color: #23FFEC;}
#Div3{background-image: url(http://gasasistemas.com/wp-content/uploads/2014/08/fondo-repetido.jpg);
background-color: #008000; color: #FFF;}
#Div4{background-image: url(http://png.clipart.me/graphics/thumbs/130/seamless-abstract-hand-drawn-waves-texture-copy-that-square-to-the-side-and-you-ll-get-seamlessly-tiling-pattern-which-gives-the_130641584.jpg);
background-color: #00F; color: #23FFEC;}
2) Crea dos páginas web cumpliendo estos requisitos:
a) Una página web debe tener una única imagen de gran tamaño (por ejemplo 1024x768 píxeles) como imagen de fondo, sin repetición de la misma.
b) Una página web debe tener una imagen de pequeño tamaño (por ejemplo 135x135 píxeles) que mediante el uso de la propiedad repeat se expanda como fondo de la página web creando un efecto tapiz.
Pagina No.1
Código HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pagina web No.1</title>
<link rel="icon" href="http://vignette3.wikia.nocookie.net/fantendo/images/5/52/Cool_link_avatar_by_pheonixmaster1-d4njygs.png/revision/latest?cb=20140711160832">
<style type="text/css">
*{font-family: book antiqua, Impact, arial;}
/*Fondo*/
body{background-image: url(http://www.corodecamarademadrid.com/wp-content/uploads/2014/11/earth_and_moon_from_space-wallpaper-1024x768-1024x675.jpg); background-repeat: no-repeat; margin: 0}
/*Cuerpo de pagina*/
#cuerpo{max-width: 450px;max-height: 768px;
background-color: #66ccff; border: 5px groove #3399ff;}
/*titulo*/
h3{text-decoration: underline;}
/*parafo*/
p{background-color: #E0FFFF; margin-bottom: 0}
/*Menu*/
ul{color: #66ccff;}
/*Botones*/
button a{background-color: white; border: 0;
color: black !important; text-decoration: none !important;
font-weight: bold;}
</style>
</head>
<body>
<!--Cuerpo de pagina-->
<div id="cuerpo">
<h3>Bienvenidos a mi pagina WEB Improvisada</h3>
<p>En esta pagina solo quiero demostrar el uso de el color e imagen de fondo....<br><br>Aquí esta, a la derecha -------><br><br>
Lo siento, tal vez la imagen pesa mucho.
<br><br>Bueno no tengo mucho que decir(y no creo que lo necesite) asi que hare relleno con un menú para ir de una pagina a otra.</p><br>
<h4>Presiona abajo</h4>
<button type="button"><a href="Pagina_web_No.2.html" title="Ir a la pagina 2">Ir a la pagina No.2</a></button><br><br>
</div>
</body>
</html>
Pagina No.2
Código HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pagina web No.1</title>
<link rel="icon" href="http://vignette3.wikia.nocookie.net/fantendo/images/5/52/Cool_link_avatar_by_pheonixmaster1-d4njygs.png/revision/latest?cb=20140711160832">
<style type="text/css">
*{font-family: book antiqua, Impact, arial;}
/*Fondo*/
body{background-image: url(http://www.corodecamarademadrid.com/wp-content/uploads/2014/11/earth_and_moon_from_space-wallpaper-1024x768-1024x675.jpg); background-repeat: no-repeat; margin: 0}
/*Cuerpo de pagina*/
#cuerpo{max-width: 450px;max-height: 768px;
background-color: #66ccff; border: 5px groove #3399ff;}
/*titulo*/
h3{text-decoration: underline;}
/*parafo*/
p{background-color: #E0FFFF; margin-bottom: 0}
/*Menu*/
ul{color: #66ccff;}
/*Botones*/
button a{background-color: white; border: 0;
color: black !important; text-decoration: none !important;
font-weight: bold;}
</style>
</head>
<body>
<!--Cuerpo de pagina-->
<div id="cuerpo">
<h3>Bienvenidos a mi pagina WEB Improvisada</h3>
<p>En esta pagina solo quiero demostrar el uso de el color e imagen de fondo....<br><br>Aquí esta, a la derecha -------><br><br>
Lo siento, tal vez la imagen pesa mucho.
<br><br>Bueno no tengo mucho que decir(y no creo que lo necesite) asi que hare relleno con un menú para ir de una pagina a otra.</p><br>
<h4>Presiona abajo</h4>
<button type="button"><a href="Pagina_web_No.2.html" title="Ir a la pagina 2">Ir a la pagina No.2</a></button><br><br>
</div>
</body>
</html>
Tema: HTML y CSS Background-image y Background-repeat. Imagenes de fondo. CU01030D (Leído 3594 veces)
RSS -
WAP2