Foros aprenderaprogramar.com

Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: Dimitar Stefanov en 12 de Enero 2016, 21:02

Título: Poner una imagen de fondo en página web Ejemplo background-image repeat CU01030D
Publicado por: Dimitar Stefanov en 12 de Enero 2016, 21:02
Mis códigos del ejercicio CU01030D del curso CSS desde cero.

Primer ejercicio:

Código HTML:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Portal web">
<meta name="keywords" content="programar,cursos">
<link rel="stylesheet" type="text/css" href="estilos39.css">
<title>Ejemplo background-image</title>
</head>
<body>
<div id="page">
<div id="header">
</div>
<div id="wrapper">
<div id="menu">
</div>
<div id="body">
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>

Código CSS: "estilos39.css"

Código: [Seleccionar]
div div div div {
width: 250px;
height: 250px;
margin: 30px;
padding: 30px;
}
#a {
background-color: blue;
background-image: url(1.png);
}
#b {
background-color: yellow;
background-image: url(1.png);
}
#c {
background-color: red;
background-image: url(1.png);
}
#d {
background-color: pink;
background-image: url(1.png);
}



PD: Adjunto el archivo de imagen.
Título: Ejercicio CU01030D(2) del curso CSS desde cero
Publicado por: Dimitar Stefanov en 12 de Enero 2016, 21:07
Segundo ejercicio:

A)

Código HTML:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Portal web">
<meta name="keywords" content="programar,cursos">
<link rel="stylesheet" type="text/css" href="estilos40.css">
<title>Ejemplo background-image</title>
</head>
<body>
<div id="page">
<div id="header">
</div>
<div id="wrapper">
<div id="menu">
</div>
<div id="body">
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>

Código CSS: "estilos40.css"

Código: [Seleccionar]
html {
background-image: url(http://www.stefjotrans.com/images/S__6971408.jpg);
background-repeat: no-repeat;
}

B)

Código HTML:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Portal web">
<meta name="keywords" content="programar,cursos">
<link rel="stylesheet" type="text/css" href="estilos41.css">
<title>Ejemplo background-image</title>
</head>
<body>
<div id="page">
<div id="header">
</div>
<div id="wrapper">
<div id="menu">
</div>
<div id="body">
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>

Código CSS: "estilos41.css"

Código: [Seleccionar]
html {
background-image: url(1.jpg);
background-repeat: repeat;
}


PD: Adjunto el archivo de imagen.
Título: Re:Poner una imagen de fondo en página web Ejemplo background-image repeat CU01030D
Publicado por: Ogramar en 15 de Enero 2016, 19:00
Buenas dimiste

Para el ejercicio 1:

Al meter tanto div dentro de otro usas un selector como div div div div que es un poco excesivo para un ejercicio simple como este

El ejercicio te pedía poner distintas imágenes de fondo en cada caso, tú has usado siempre la misma imagen de fondo


Para el ejercicio 2:

El apartado a) lo veo bien

El apartado b) lo veo también bien

Salu2
Título: Re:Poner una imagen de fondo en página web Ejemplo background-image repeat CU01030D
Publicado por: Dimitar Stefanov en 15 de Enero 2016, 19:12
Buenas Ogramar,

tienes razón. En el primer ejercicio teníamos que utilizar distintos imágenes, no sé porque he utilizado la misma, quizás por comodidad para no buscar más.

Gracias por corregirme otro ejericico más.

Saludos.