No me aparece la imagen de fondo si utilizo "estilos.css"

**MARTA_AAN** · 14/02/2013, 18:33

Hola, buenas,

Mi problema es que cuando utilizo el archivo estilos.css para crear una imagen de fondo, en body{}, no me aparece; he probado de 1000 formas, y nada; lo único que me funciona es ponerlo en el archivo .html, y claro, tengo que ir por todas las páginas haciendo lo mismo; ¿me podéis ayudar? Realmente, yo no lo quiero poner en el <body> sino justo detrás. Pero digo yo que habrá alguna forma de ponerlo en css, no?

Esto es lo que pongo en html:

<!DOCTYPE html>
<html lang="es">

<head>
<style type="text/css">
html {
background: scroll repeat center top url(la-nota-de-agua/imag/grego.jpg);
}

</style>
<link rel="stylesheet" type="text/css" media="all" href="la-nota-de-agua/estilos.css"/>
</head>

y esto es lo último que he puesto en estilos.css:

body {
margin: 0px 120px 60px 120px;
background: scroll repeat center top url(la-nota- de-agua/imag/grego.jpg);
height : 100%;
border: 2px double maroon;
background-color: #b08852;
}

Muchas gracias.

**Lombardo** · 14/02/2013, 18:58

Prueba a quitar todos los estilos del index. Pon un div donde quieras que esté la foto, y define luego background con la hoja de estilos

Saludos.

**MARTA_AAN** · 14/02/2013, 19:23

lo intentaré así, y si sale ok, te lo cuento..

muchas gracias!

**MARTA_AAN** · 14/02/2013, 19:55

Hola otra vez,

lo he probado como me has dicho (creo que lo he probado bien, ya me dirás), pero lo que yo quiero es que el fondo esté detrás del body, no dentro. Y así es como me aparece.
A ver si me explico mejor: en mi web el body tiene unos márgenes estrechitos, y yo quiero poner la foto FUERA de esos márgenes, de tal modo que sólo se ve un poquito por los lados y por debajo de esos márgenes. Pero poniendo el div, lo pone dentro de los márgenes.
Este es el código que he escrito:

en el index:
<!DOCTYPE html>
<html lang="es">

<div id="background">

<head>
<link rel="stylesheet" type="text/css" media="all" href="estilos2.css"/>
<body>
.
.
.
</body>
</head>
</div>
</html>

en el archivo estilos2.css:
#background {
background: scroll repeat center top url(imag/grego.jpg);
}

¿qué me falta? ¿qué es lo que no hago bien?
Muchas gracias, otra vez.

**Lombardo** · 15/02/2013, 10:25

¡Qué caos!

Veamos, has metido un div en el head, cierras head después de cerrar body, no hay etiqueta inicial html...

Aquí tienes la estructura de una web:

Código HTML:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>

**Lombardo** · 15/02/2013, 10:34

Y una vez que pongas todo en su sitio ordenadamente (HTML), empiezas con la presentación (CSS).

Prueba una cosa: en vez de fijar medidas al body, pon un div (en body, no en head) con esas medidas.

Y pon así la imagen global de fondo en la hoja de estilos:

Código:

body: {
width: 100%;
background-image: url(foto.jpg);
background-repeat: no-repeat;
}

La foto, claro está, debe tener medidas apropiadas para su función sin que la aplicación la agrande, porque entonces perdería calidad. Saludos.

**MARTA_AAN** · 15/02/2013, 12:02

Ordenado lo tenía.. es que en vez de hacer un copy-paste, lo escribí y lo puse mal :-S
Así que, estructura ok... pero, ¿la etiqueta <html> no es <html lang="es">? Porque yo pensaba que era así, y si no es así, ando peor de lo que creía.. 8-O

voy a intentar lo que me has dicho (el body entiendo que sin los dos puntos, no?) y ya te comentaré..

Muchas gracias!

**Lombardo** · 15/02/2013, 12:23

¡Claro, perdona, lo escribí rápido y se me escaparon los dos puntos!

Puedes señalar el idioma ahí, yo suelo ponerlo aparte.

Y de nada, un saludo.

**Jenkins** · 15/02/2013, 14:14

hola, espero ayudarte en lo que pueda.
Mira la etiqueta <html lang=es> sirve para indicarle a los navegadores el idioma en que esta escrita la pagina, de igual forma si solamente escribes <html> también es valido solamente que no declara el idioma en que esta escrita la pagina por su puesto hay otras formas de hacer como utilizando un meta en el <head>, pero no te preocupes que lo vas escribiendo bien.

Ahora, lo de la imagen de fondo para tu web, lo mas atrás que puedes ir es el <body> y encima vienen las capas o <div>, te lo aclaro porque en tu primer mensajes has escrito que quieres ver esa imagen detrás del <body> Te lo explico con un ejemplo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html lang=es>
<head>
<title>Page title</title>
<link rel="stylesheet" href="ruta de hoja de estilos" type="text/css" media="all">

</head>
<body>
<div id="global">
<p>hola<p>

</div>

</body>
</html>

Ahora en la hoja de estilos, escribes algo como esto

body {background: #1d140f url(../organizar/objetos/linea-bg.gif) repeat: repeat; text-align: center;}
#global { width: 940px; margin: 0 auto; text-align: left; background: url(images/content-bg.jpg) no-repeat center 100%;}

Espero haberte servido de ayuda.

**MARTA_AAN** · 18/02/2013, 11:37

Muchas gracias por las aclaraciones.. probaré lo que me habéis dicho y os cuento qué tal..

**MARTA_AAN** · 18/02/2013, 14:06

vale, ya me sale la foto ocupando toda la página, pero... dentro de los márgenes no quiero que se vea esa foto, sino que quiero poner un color; y no logro poner las dos cosas a la vez.. cambiando cositas o me sale la foto, o me sale el color, pero no las dos cosas juntas, que es como lo consigo poniendo un estilo en html, y el otro en el archivo css..
no sé si me explico; lo que yo quiero exactamente es esto:

ejemplo-web.jpg

¿cómo se puede hacer en el archivo css?
Gracias otra vez.

**Yaneth** · 18/02/2013, 14:59

hola
ya subiste tus avances????
danos la url para verlo

si no...pega aqui como tienes el html y el css completos

saludos

**Jenkins** · 18/02/2013, 17:05

Creo que es mas sencillo con un ejemplo simple, espero te ayude:

Codigo html:

<html>
<head>
<title>Editado por Jenkins</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body>
<div id="global"> 
<div id="contenido"> 
<p>Aqui va el contenido cualquiera que sea</p>
</div> 
</div> 
</body>
</html>

Codigo Css:

*{margin:20px; padding:0px; border:0px;}
body {background-color: silver; text-align: center;}
#global {background-color: red; width: 95%; margin: 4px auto;}
#contenido {background-color: yellow; width: 95%;}

Si notas utilizando *{margin:20px} logras separar la capa global del margen superiror y luego le indicas su tamaño a un 95% lo cual deja libre un 5% del body, ademas si quieres otra capa igual lo haces con contenido y lo puedes repetir infinitamente, ahora si fuera una imagen solamente cambias background-color por background: url(ruta de la imagen) e incluyes repeat o no repeat segun corresponda.

Me hubiera gustado dejarte la imagen pero el sistema dice que exedi mi cuota, yo lo probe y funciono bastante bien igual a tu imagen.

**MARTA_AAN** · 19/02/2013, 08:02

muchas gracias, Jenkins.. justo era eso lo que quería..

Tema: No me aparece la imagen de fondo si utilizo "estilos.css"

Herramientas

Buscar Tema

Visualizar

No me aparece la imagen de fondo si utilizo "estilos.css"

Sigue sin aparecer fondo con css

Temas Similares

alguien me puede pasar "plantilla.html" y "estilos-generales" completo

Diferencia entre "Estilos Unicos" y "Clases de Estilos"

No logro insertar "imagen superior","imagen i

AYUDA!! Me he atascado en "imagen de fondo"

Permisos de Publicación