Jump to content

Problema background (SOLUCIONADO)


miggon

Recommended Posts

Wenas gente,

 

Soy un recién llegado a esta plataforma y de momento me tiene enamorado...

 

Tengo un proyecto entre manos que me está dando un quebradero de cabeza y espero que vosotros podais echarme un cable... resulta que muy a mi pesar el cliente quiere usar un fondo de una imagen y necesito que se quede centrada y fija para que cuadre en todas las resoluciones pero no consigo dar con la tela, el problema es que estoy usando un theme que trabajo bajo el default y para hacer ciertas modificaciones se usa una la hoja cleantheme.css y otras en global.css y aunque he tratado de hacerlo en las dos no consigo modificarlo a mi gusto.

 

Espero que me podais arrojar un poquillo de luz en mi oscura cabecilla ;)

 

Versión: 1.5.4.1

 

Theme: Nice and Cleane Theme (http://webiz.bg/clea.../documentation/)

 

Web: http://seafoodgourmets.com

 

Os adjunto los dos css...

 

Gracias por vuestro tiempo.

cleantheme.css

global.css

Edited by miggon (see edit history)
Link to comment
Share on other sites

Fija con fixed.

 

De todos modos, ¿Has mirado esto: http://www.w3schools..._background.asp para ver las opciones que tienes?

 

Gracias por tu rapida respuesta, uso el fixed en global.css no??

 

Asi es como está ahora...

 

body{
font:normal 14px/18px Arial, Verdana, sans-serif;
color:#222;
   background-image:url(../img/patterns/pattern8.jpg);
   background-position: top center;
   background-repeat: no-repeat;
   background-attachment:fixed
}

Edited by miggon (see edit history)
Link to comment
Share on other sites

Un truco muy bueno en css, es el atributo !important, asi que si tienes diferentes css que se contradicen, el navegador cojera el valor del !important.

Así por ejemplo seria:

body{

font:normal 14px/18px Arial, Verdana, sans-serif;

color:#222;

background-image:url(../img/patterns/pattern8.jpg);

background-position: top center;

background-repeat: no-repeat;

background-attachment:fixed!important

}

de todas formas, no llego a entender que quieres hacer exactmente

  • Like 1
Link to comment
Share on other sites

Un truco muy bueno en css, es el atributo !important, asi que si tienes diferentes css que se contradicen, el navegador cojera el valor del !important.

Así por ejemplo seria:

body{

font:normal 14px/18px Arial, Verdana, sans-serif;

color:#222;

background-image:url(../img/patterns/pattern8.jpg);

background-position: top center;

background-repeat: no-repeat;

background-attachment:fixed!important

}

de todas formas, no llego a entender que quieres hacer exactmente

 

Lo que quiero basicamente es usar una imagen de fondo y que quede centrada use la resolución que use para que no queden huecos blancos por ninguna parte, lo mismo me he complicado la vida sin necesidad... total que no me aclaro jejeje Gracias por tu respuesto lo he probado y sigo sin solucionarlo.

 

Lo puedes ver en la web como está ahora...

Link to comment
Share on other sites

VAle!! ya te entiendo.... jejej es que es complicado, aver una cosa es poner fijo el fondo y otra es que se ajuste el ancho i alto a todos los dispositivos... una vez me pidiero eso mismo y lo pude lograr con la ayuda de este post:

http://css-tricks.com/perfect-full-page-background-image/

se queda el fondo super ajustado siempre en todo momento... y si es eso lo que te referias.. si... te has complicado la vida un poquitin jejeje.

  • Like 1
Link to comment
Share on other sites

VAle!! ya te entiendo.... jejej es que es complicado, aver una cosa es poner fijo el fondo y otra es que se ajuste el ancho i alto a todos los dispositivos... una vez me pidiero eso mismo y lo pude lograr con la ayuda de este post:

http://css-tricks.co...ckground-image/

se queda el fondo super ajustado siempre en todo momento... y si es eso lo que te referias.. si... te has complicado la vida un poquitin jejeje.

 

jajaja ya me imaginaba, muchas gracias voy a ver le post y te comento :)

Link to comment
Share on other sites

¿Como fue?

 

Saludos,

 

Juas pues de momento no lo consigo me he cargado un par de veces el fondo... imagino que a la 5-6 o 7ª será la vencida...

 

¿Hay algun sitio donde se haga referencia al fondo diferente a global.css o en este caso al cleantheme.css?

 

Es que he puesto los fondos en las dos hojas para que salga todo en color blanco (sin imagen) y me sigue saliendo la imagen y eso me tiene mosca jejee

Edited by miggon (see edit history)
Link to comment
Share on other sites

Al instalar el dichoso tema tambien habia que aplastar un archivo header.tpl y en el he encontrado esta pequeña referencia a pattern8 (es el fondo predeterminado de la plantilla)

 

<body {if isset($page_name)}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if} class="cleantheme two_col grid pattern8{if $hide_left_column}hide-left-column{/if} {if $hide_right_column}hide-right-column{/if} {if $content_only} content_only {/if}">

 

No se si tendrá que ver...

 

Edito: Viendo en la web del creador del tema efectivamente en el header cambio el pattern8 por el que quiera (1,2,3...) he probado a eliminarlo para ver si asi coge directamente el del global.css pero nada... :`(

Edited by miggon (see edit history)
Link to comment
Share on other sites

Lo tengo!!!!!!!!!!

 

Vale, lo primero que he hecho es :

 

Eliminar el "grid" del header.tpl modificado del theme

Modificar el valor del cleantheme.css para decirle que el background sea transparente

background:transparent;

Aplicar el tutorial que me envío AlfonsoSoler especificamente esta opción:

html {
 background: url(images/bg.jpg) no-repeat center center fixed;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}

 

Y listo ya tengo el fondo perfecto ^^, Gracias a todos los que han respondido y en especial a AlfonsoSoler que me dio la llave del laberinto.

 

Gracias !!!!

Link to comment
Share on other sites

Guest
This topic is now closed to further replies.
×
×
  • Create New...