Regresar a la página ComoCrearTuWeb.com
Resultados 1 al 14 de 14

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

Vista Híbrida

Mensaje Anterior Mensaje Anterior   Próximo Mensaje Próximo Mensaje
  1. #1
    Recien Llegado! Merodeador Avatar de MARTA_AAN
    Fecha de Ingreso
    14 feb, 13
    Ubicación
    Madrid
    Mensajes
    9
    Poder de Reputación
    0

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

    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.

  2. #2
    Esto empieza a ser un vicio... Habitante Avatar de Lombardo
    Fecha de Ingreso
    24 jul, 11
    Ubicación
    Austria
    Mensajes
    402
    Poder de Reputación
    19
    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.

  3. #3
    Recien Llegado! Merodeador Avatar de MARTA_AAN
    Fecha de Ingreso
    14 feb, 13
    Ubicación
    Madrid
    Mensajes
    9
    Poder de Reputación
    0
    lo intentaré así, y si sale ok, te lo cuento..

    muchas gracias!

  4. #4
    Recien Llegado! Merodeador Avatar de MARTA_AAN
    Fecha de Ingreso
    14 feb, 13
    Ubicación
    Madrid
    Mensajes
    9
    Poder de Reputación
    0

    Sigue sin aparecer fondo con css

    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.

  5. #5
    Esto empieza a ser un vicio... Habitante Avatar de Lombardo
    Fecha de Ingreso
    24 jul, 11
    Ubicación
    Austria
    Mensajes
    402
    Poder de Reputación
    19
    ¡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>

  6. #6
    Esto empieza a ser un vicio... Habitante Avatar de Lombardo
    Fecha de Ingreso
    24 jul, 11
    Ubicación
    Austria
    Mensajes
    402
    Poder de Reputación
    19
    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.

  7. #7
    Recien Llegado! Merodeador Avatar de MARTA_AAN
    Fecha de Ingreso
    14 feb, 13
    Ubicación
    Madrid
    Mensajes
    9
    Poder de Reputación
    0
    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!

  8. #8
    Recien Llegado! Merodeador Avatar de MARTA_AAN
    Fecha de Ingreso
    14 feb, 13
    Ubicación
    Madrid
    Mensajes
    9
    Poder de Reputación
    0
    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.

  9. #9
    Esto empieza a ser un vicio... Habitante Avatar de Lombardo
    Fecha de Ingreso
    24 jul, 11
    Ubicación
    Austria
    Mensajes
    402
    Poder de Reputación
    19
    ¡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.

  10. #10
    Me va gustando esto... Habitante Avatar de Jenkins
    Fecha de Ingreso
    04 ene, 13
    Ubicación
    San Jose, Costa Rica
    Mensajes
    47
    Poder de Reputación
    15
    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.
    Aprende Como hacer una Boda utilizando varios pasos sencillos.

  11. #11
    Recien Llegado! Merodeador Avatar de MARTA_AAN
    Fecha de Ingreso
    14 feb, 13
    Ubicación
    Madrid
    Mensajes
    9
    Poder de Reputación
    0
    Muchas gracias por las aclaraciones.. probaré lo que me habéis dicho y os cuento qué tal..

  12. #12
    Moderador CCTW Habitante Avatar de Yaneth
    Fecha de Ingreso
    27 abr, 07
    Ubicación
    Mèxico
    Mensajes
    10,344
    Poder de Reputación
    74
    hola
    ya subiste tus avances????
    danos la url para verlo

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

    saludos
    ______________________________________

    reparacion de rines


    _____________________________________

  13. #13
    Me va gustando esto... Habitante Avatar de Jenkins
    Fecha de Ingreso
    04 ene, 13
    Ubicación
    San Jose, Costa Rica
    Mensajes
    47
    Poder de Reputación
    15
    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.

    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.
    Aprende Como hacer una Boda utilizando varios pasos sencillos.

  14. #14
    Recien Llegado! Merodeador Avatar de MARTA_AAN
    Fecha de Ingreso
    14 feb, 13
    Ubicación
    Madrid
    Mensajes
    9
    Poder de Reputación
    0
    muchas gracias, Jenkins.. justo era eso lo que quería..

Temas Similares

  1. Respuestas: 1
    Último Mensaje: 27/12/2011, 23:57
  2. Diferencia entre "Estilos Unicos" y "Clases de Estilos"
    Por joss555 en el foro Todo sobre Estilos CSS
    Respuestas: 2
    Último Mensaje: 02/07/2011, 15:19
  3. No logro insertar "imagen superior","imagen i
    Por K-3GAMO en el foro Curso Paso a Paso con Html-Kit.
    Respuestas: 1
    Último Mensaje: 13/01/2010, 16:10
  4. AYUDA!! Me he atascado en "imagen de fondo"
    Por mar4278 en el foro Foro General
    Respuestas: 1
    Último Mensaje: 01/06/2009, 07:30

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •