Entrar

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

MARTA_AAN · · Solicitar retirada
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 · · Solicitar retirada
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 · · Solicitar retirada
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 · · Solicitar retirada
¡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:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Lombardo · · Solicitar retirada
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:
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 · · Solicitar retirada
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 · · Solicitar retirada
¡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 · · Solicitar retirada
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">
<!-- Verifica primero que la ruta de la hoja de estilos sea la correcta, ademas para paginas que no sean el index debes agregar ../ para indicar la salida de la carpeta -->
</head>
<body>
<div id="global"><!-- Creas una capa para dar tamaño, forma, para que salga adelante del body, etc -->
<p>hola<p>
<!-- Cierras la capa -->
</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 · · Solicitar retirada
Muchas gracias por las aclaraciones.. probaré lo que me habéis dicho y os cuento qué tal..
MARTA_AAN · · Solicitar retirada
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:



¿cómo se puede hacer en el archivo css?
Gracias otra vez.
Yaneth · · Solicitar retirada
hola
ya subiste tus avances????
danos la url para verlo

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

saludos
Jenkins · · Solicitar retirada
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"> <!-- Inicio Global -->
<div id="contenido"> <!-- Inicio Contenido -->
<p>Aqui va el contenido cualquiera que sea</p>
</div> <!-- Cierre contenido -->
</div> <!-- Cierre Global -->
</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. :eek:

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.