Background WordPress

S

Buenos días,

Estoy haciendo una página web para un amigo y quería pediros si sabríais decirme como coloco una imagen repetida como fondo en un theme de WordPress. Casi no se nada de CSS y poco de php. Lo estoy intentando pero no lo consigo...

¡Muchas gracias!

Pàgina web: http://alllambs.netau.net/
Imagen de fondo: http://i.imgur.com/qEfJg.gif

Kr4n3oK

A ver metete en el CSS y busca una etiqueta que se llame html o body o html,body, ahí agrega un
background:url(URLIMAGEN);

1 1 respuesta
S

#2 Lo he intentado poner aquí pero no se ve nada...

  • {padding:0; margin:0; border: none; outline:0; }
    {background-image:url('http://i.imgur.com/qEfJg.gif' ); background-repeat:repeat-x; background-position:right top; }
    body {font-family:Helvetica, Arial, Tahoma, sans-serif; font-size: 62.5%; text-align:center; }
    h1,h2,h3,h4,h5,h6 {font-weight:normal; margin:0; padding:0; font-size: 1em; line-height: 1.2em; }
    p {margin: 0 0 15px; }
    li,p {line-height: 1.6em; }
    li {list-style-type: none; }
Kr4n3oK
* {padding:0; margin:0; border: none; outline:0; }
body { background-image:url('http://i.imgur.com/qEfJg.gif'); font-family:Helvetica, Arial, Tahoma, sans-serif; font-size: 62.5%; text-align:center; }
h1,h2,h3,h4,h5,h6 {font-weight:normal; margin:0; padding:0; font-size: 1em; line-height: 1.2em; }
p {margin: 0 0 15px; }
li,p {line-height: 1.6em; }
li {list-style-type: none; }

Prueba así.
Lo que veo en tu código es que, estas declarando un background como si de una etiqueta html se tratara, cosa que no lo es, es una propiedad de una etiqueta en todo caso.
Es decir, body{
background:url(url);
}
Si funciona.
{background:url();} no, que yo sepa claro.

1 respuesta
S

#4 Nada u.u

  • {padding:0; margin:0; border: none; outline:0; }
    body{font-family:Helvetica, Arial, Tahoma, sans-serif; font-size: 62.5%; text-align:center; }
    background:url('http://i.imgur.com/qEfJg.gif' );
    }
    h1,h2,h3,h4,h5,h6 {font-weight:normal; margin:0; padding:0; font-size: 1em; line-height: 1.2em; }
    p {margin: 0 0 15px; }
    li,p {line-height: 1.6em; }
    li {list-style-type: none; }
1 respuesta
Kr4n3oK

#5 Quítale las comillas a la url a ver.

2 respuestas
S

#6 ¿Así?

GreyShock
body{font-family:Helvetica, Arial, Tahoma, sans-serif; font-size: 62.5%; text-align:center; background:url('http://i.imgur.com/qEfJg.gif' );
}

había una llave de más

1 respuesta
S

#8 #6 Lo he puesto y no funciona... no se si estoy haciendo yo alguna cosa mal o bien hay otro problema.

1 respuesta
GreyShock

#9 Le he echado un vistazo a tu web con el firebug, y el fondo SÍ que funciona. ¿sabes qué ocurre? La capa "container" tiene el fondo blanco y ocupa toda la pantalla.

Busca en las css las definicion de estilo de #container{} y bórrale el atributo Background. auqnue te advierto que la cosa no es muy atractiva visualmente xD

EDIT:

Sustituyendo las reglas de estilo de container por esto queda algo medio decente...

#container {
    background: none repeat scroll 0 0 #FFFFFF;
    margin: 0 auto;
    min-height: 200px;
    text-align: left;
    width: 960px;
}
1 1 respuesta
S

#10 Muchisimas gracias, funciona!!!!! =)

Si supieras como ponerle sombra a la columna blanca del medio y que salga un poco por los dos lados con fondo a rallas ya sería la ostia XD

1 respuesta
GreyShock

#11

#container {
    background: none repeat scroll 0 0 #FFFFFF;
    box-shadow: 0 4px 10px #222;
    margin: 0 auto;
    min-height: 200px;
    text-align: left;
    width: 800px;
}

25€, gracias xD

1 1 respuesta
S

#12 No sabes cuanto te quiero ahora mismo... una última cosa, en vez de 800 he puesto 840 para dejar 20 de margen en cada lado, ¿Sabes como centrarlo?

Ver -> http://alllambs.netau.net/

1 respuesta
GreyShock

#13 Usa un poco el sentido común. Te doy una pista.

text-align

;)

edit: por cierto, me mola mucho el efecto que le da web con text-align: right

#15 Ame que hacker! :D lee un poquillo acerca de CSS que no tiene mucho misterio y te ahorrará muchos posts. De todas formas, encantado de ayudar :3

1 2 respuestas
S

#14 text-align: center; -> http://alllambs.netau.net/ u.u

1 respuesta
S

#14 No me refería al texto sino a los 2 margenes :_D

PD: Lo conseguí!!!! He vuelto a poner 800 y después

border-left: 20px solid #FFFFFF;
border-right: 20px solid #FFFFFF;

:_D

1 respuesta
GreyShock

#16 Así me gusta, autosuficiencia! ;)

1 1 respuesta
S

#17 ¿Sabes como podría arreglar el menú? Le puse una imagen de fondo... http://i.imgur.com/fDeKN.gif pero se me descuadra todo >.<

1 respuesta
GreyShock

#18 Y cómo quieres que quede? :S

Eso de poner una imagen de fondo es un poco chapucilla, pero para salir del paso vale. Modifica la imagen de fondo con el potochos y vuélvela a subir.

Sin saber muy bien lo que quieres no puedo decir más.

1 1 respuesta
S

#19 :3 http://i.imgur.com/5Rwf2.jpg

1 respuesta
GreyShock

#20 Uff.. es que me aprece más follón hacerlo con una imagen que maquetarlo debidamente xD Si te fijas sólo son cajas que tienen de fondo color #000 y tira millas. No tiene sentido usar una imagen :S

Hasta ahí te puedo acompañar, que por cosas más pequeñas he hecho presupuesto xD

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            body{
                text-align:center;
            }
            #wrapper{
                margin:0 auto;
                width:800px;
            }
            #menu{
                width:100%;
                height:35px;
            }
            #menu_izq{
                float:left;
                width:295px;
                height:35px;
                margin-right:5px;
            }
            #menu_der{
                float:left;
                width:500px;
                height:35px;
                background:#000;
            }
            #menu_enlaces{
                height:20px;
                margin-top:7px;
                background:#000;
                width:100%;
            }
            #menu_enlaces div{
                margin-left:20px;
                float:left;
            }
            #menu_enlaces div a{
                color:#fff;
                text-decoration:none;
            }
        </style>
        <title>Sandbox</title>
    </head>
    <body>

    <div id="wrapper">
        <div id="menu">
            <div id="menu_izq">
                <div id="menu_enlaces">
                    <div><a href="#">Opción</a></div>
                    <div><a href="#">Opción</a></div>
                    <div><a href="#">Opción</a></div>
                    <div><a href="#">Opción</a></div>
                </div>
            </div>
            <div id="menu_der">
                
            </div>
        </div>
    </div>

</body>
</html>
1 1 respuesta
S

#21 Muchísimas gracias de verdad... ahora intentaré ver que puedo hacer en el wordpress.

1 respuesta
GreyShock

#22 Espero que te sirva de guía por lo menos.. pero si te pierdes avísame, que no te puedo abandonar ahora por motivos kármicos xD

1 1 respuesta
S

#23 Lo he puesto dentro! fuck yeah! Eres el amo :_D pero no se porque me sale descuadrado... las noticas están por encima del menú en vez de abajo.

http://alllambs.netau.net/

1 respuesta
GreyShock

#24 Ok, a ver.. por donde empiezo xD el ejemplo que te he pegado ahí era como una web entera por asi decirlo. Tú sólo tienes que incrustar esta parte:

            <div id="menu">
                <div id="menu_izq">
                    <div id="menu_enlaces">
                        <div><a href="#">Opción</a></div>
                        <div><a href="#">Opción</a></div>
                        <div><a href="#">Opción</a></div>
                        <div><a href="#">Opción</a></div>
                    </div>
                </div>
                <div id="menu_der">
                   
</div> </div>

donde va el menú.

y luego en el archivo css añadir esto:

            #menu{
                width:100%;
                height:35px;
            }
            #menu_izq{
                float:left;
                width:295px;
                height:35px;
                margin-right:5px;
            }
            #menu_der{
                float:left;
                width:500px;
                height:35px;
                background:#000;
            }
            #menu_enlaces{
                height:20px;
                margin-top:7px;
                background:#000;
                width:100%;
            }
            #menu_enlaces div{
                margin-left:20px;
                float:left;
            }
            #menu_enlaces div a{
                color:#fff;
                text-decoration:none;
            }

culpa mía por no especificar :P

todo lo demás que hay por ahí, sobra >_<

EDIT: ah! y en lugar de poner "opción" y todo eso, mete el php de wordpress que carga el menú.... que.. ahora que lo pienso ahí vamos a tener un problema. Porque wordpress lo crea con <ul><li>.. pero bueno, lo puedes meter a pelo tú, cosa que NO TE RECOMIENDO PARA NADA, pero en vista que de php sabrás menos aún que de css... puede ser un mundo todo eso :S

1 1 respuesta
S

#25 Perfecto, ahora si, pero algo se me ha descuadrado >.<

1 respuesta
GreyShock

#26 Ay dios, la que se está liando por ahí según voy viendo como actualizas... xD

Yo lo siento mucho tío, pero me llama el beber, así que te abandono hasta mañana en pos de la cerveza. ¡Ánimo!

Espero que otro alma caritativa me tome el relevo.. ejem ejem

1 1 respuesta
S

#27 Lo conseguí! <3

Puse 3 < br > al final para separar el menú y las noticias :_P

http://alllambs.netau.net/

1 respuesta
scumah

#28, A mí se me ve así desde chrome:

Mira esto que he montado, a ver si te ayuda: http://jsfiddle.net/3tn3f/

1

Usuarios habituales

  • scumah
  • Shrivatsa
  • GreyShock
  • Kr4n3oK