Jump to content

Imagen de fondo estática y tienda flotante (SOLUCIONADO)

gisc09

By gisc09
in Discusión general

 Share

Recommended Posts

gisc09 Newbie

gisc09

Posted
Posted

Hola buenos días,

 

Abro este post porqué me he encontrado con un problema que parece ser no esta muy documentado y quiero poner la solución por si a alguien más le interesa o necesita ayuda.

 

Para poner una imágen estática de fondo hay que modificar el css (/theme/tu_theme/css/global.css) y poner algo parecido a esto:

 

body {
   background-image:url(../img/foto.jpg);
   background-attachment:fixed;
   background-repeat:no-repeat;
   font-size: 11px;
   font-family: Verdana, Arial, Helvetica, Sans-Serif;
   color: #5d717e;
   text-align: center;
}

 

Explico: lo más interesante son los atributos background.

background-image: es la dirección de la imágen que queremos poner de fondo.

background-repeat: con el valoor no-repeat la imagen no se repite

background-attachment:fixed: esta es la propiedad css interesante. Con esta propiedad conseguimos que la imagen de fondo sea siempre visible y la tienda "flote" encima suya.

 

Ejemplo (web en construcción e imagen provisional): http://www.oficlick.net

  • Like 2
Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

Por un despiste lo he publicado en este apartado y quería publicarlo en discusión general. No se como eliminarlo y lo he creado en el apartado de discusión general. Siento las molestias!

 

He movido el tema a esta sección, ya que es la sección de aportes, y queda todo mejor ordenado.

 

Un saludo y gracias por tu colaboración con la comunidad de prestashop.

Link to comment
Share on other sites
  • 3 weeks later...
  • 2 weeks later...
  • 2 months later...
anta Newbie

anta

Posted
Posted

Muchas gracias por este aporte, es lo que estaba buscando!!!, nada una duda, como le hago para que poner una cabecera y no se mezcle (sobreponga) con la imagen de background?. Saludos y muchas gracias por toda la ayuda que me puedan dar.

 

Saludos.

Link to comment
Share on other sites
  • 3 weeks later...
JoseMRT Newbie

JoseMRT

Posted
Posted

No lo entiendo, estoy intentando insertar la imagen de fondo y no me deja. Alquien puede mirar que es lo que estoy haciendo mal?:

 

body{

background-image:http://jamonesconarte.com/themes/alysum/css/images/Tac-4.jpg;

background-attachment:fixed;

background-repeat:no-repeat;

font-size: 11px;

font-family: Verdana, Arial, Helvetica, Sans-Serif;

color: #5d717e;

text-align: center;

}

Link to comment
Share on other sites
  • 4 weeks later...
  • 3 weeks later...
kilianwiky Newbie

kilianwiky

Posted
Posted
Hola buenos días, Abro este post porqué me he encontrado con un problema que parece ser no esta muy documentado y quiero poner la solución por si a alguien más le interesa o necesita ayuda. Para poner una imágen estática de fondo hay que modificar el css (/theme/tu_theme/css/global.css) y poner algo parecido a esto: 
 body { background-image:url(../img/foto.jpg); background-attachment:fixed; background-repeat:no-repeat; font-size: 11px; font-family: Verdana, Arial, Helvetica, Sans-Serif; color: #5d717e; text-align: center; }

Explico: lo más interesante son los atributos background. background-image: es la dirección de la imágen que queremos poner de fondo. background-repeat: con el valoor no-repeat la imagen no se repite background-attachment:fixed: esta es la propiedad css interesante. Con esta propiedad conseguimos que la imagen de fondo sea siempre visible y la tienda "flote" encima suya. Ejemplo (web en construcción e imagen provisional): http://www.oficlick.net

Hola nuenas darte las gracias por el aporte pero aun que sigo paso a paso no me funciona estoy usando prestashop 1.5.3.1 me podriais ayudar porfavor

Link to comment
Share on other sites
  • 3 months later...
nadie Rookie

nadie

Posted
Posted (edited)

Hola nuenas darte las gracias por el aporte pero aun que sigo paso a paso no me funciona estoy usando prestashop 1.5.3.1 me podriais ayudar porfavor

 

Yo uso la abreviatura directamente, es decir asi:

 

background:url('../img/foto,jpg') fixed no-repeat;

 

Lo de no-repeat es si la imagen de fondo no se reporte, si se repote logicamente no pongas no-repeat

 

Recuerda que si colocas la ruta asi:

 

../img/foto,jpg

 

La imagen foto.jpg tiene que estar subido en la carpeta img de tu plantilla.

 

/themes/tu-plantilla/img/

 

¿Puedes pasarme la direccion de tu tienda, para ver lo que te puede estar pasando?

 

---

 

Edito mensaje.....

 

Me acabo de dar cuenta de que acabo de contestar a un mensaje de hace mas de 3 meses.

(Sorry) :(

 

Mas información sobre el "background", aquí: http://www.w3schools.com/css/css_background.asp

Edited by nadie (see edit history)
Link to comment
Share on other sites
OlivierJM Newbie

OlivierJM

Posted
Posted

Estoy trabajando en local:

 

 

/* ************************************************************************************************

generic style

************************************************************************************************ */

body{

 

background:url('../img/foto.jpg') fixed no-repeat;

background-attachment:fixed;

background-repeat:no-repeat;

background-position:center;

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

color:#222;

background:#fff

}

Link to comment
Share on other sites
OlivierJM Newbie

OlivierJM

Posted
Posted

Ok solucionado, sobraba background:#ffff

 

 

/* ************************************************************************************************

generic style

************************************************************************************************ */

body{

 

background:url('../img/foto.jpg') fixed no-repeat;

background-attachment:fixed;

background-repeat:no-repeat;

background-position:center;

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

color:#222;

 

}

Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

Ok solucionado, sobraba background:#ffff

 

 

/* ************************************************************************************************

generic style

************************************************************************************************ */

body{

 

background:url('../img/foto.jpg') fixed no-repeat;

background-attachment:fixed;

background-repeat:no-repeat;

background-position:center;

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

color:#222;

 

}

 

Esto te lo comento a modo de información

 

Cuando dices esto:

 

background:url('../img/foto.jpg') fixed no-repeat;

 

ya le estas diciendo el fixed y el no-repeat, por lo que no es necesario colocar esto:

 

background-attachment:fixed;
background-repeat:no-repeat;

 

Como comente arriba, todo esto esta explicado aquí: http://www.w3schools..._background.asp

Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

Una pregunta: Esto sirve tambien cara el Featured?

 

 

 

features.JPG

 

Es que me gustaria añadir hay una imagen en lugar de un color.

 

Gracias por tu tiempo ;)

 

Te hablo de la plantilla por defecto, si es una imagen de fondo exclusivo solo para el encabezado del modulo de productos destacados, seria asi:

 

#featured-products_block_center .title_block {
background: url('ruta_imagen');
}

 

ect...

 

Ya lo que quieras poner.

Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

Te hablo de la plantilla por defecto, si es una imagen de fondo exclusivo solo para el encabezado del modulo de productos destacados, seria asi:

 

#featured-products_block_center .title_block {
background: url('ruta_imagen');
}

 

ect...

 

Ya lo que quieras poner.

 

Si es para todos los encabezados de los módulos en general, en el global.css busca esto:

 

.block .title_block, .block h4 {
padding: 6px 11px;
font-size: 12px;
color: #fff;
text-shadow: 0 1px 0 #000;
text-transform: uppercase;
background: #383838;
text-align: left;
font-weight: bold;
}

 

Quitas el:

 

background: #383838;

 

y colocas el

 

background:url('ruta_imagen') ....

Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

Te hablo de la plantilla por defecto, si es una imagen de fondo exclusivo solo para el encabezado del modulo de productos destacados, seria asi:

 

#featured-products_block_center .title_block {
background: url('ruta_imagen');
}

 

ect...

 

Ya lo que quieras poner.

 

Recuerda que si usas Prestashop 1.5.2 depende asi:

 

#featured-products_block_center .title_block {
background: url('ruta_imagen');
}

 

seria asi:

 

#featured-products_block_center h4{
background: url('ruta_imagen');
}

 

A partir de Prestashop 1.5.3, es asi:

 

#featured-products_block_center .title_block {
background: url('ruta_imagen');
}

 

en fin, cambian cosas en las actualizaciones de las plantillas, y de los modulos sin que nos demos cuenta.

Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

 

 


En lugar de : background:url('../img/black.jpg')

Puse: background: url ('../img/black.jpg')

Despues de los : y despues de url


Ah vale (accidente que nos pasa a todos alguna vez en la vida)

Lo importante es que lo solucionastes.
Link to comment
Share on other sites
Guest
This topic is now closed to further replies.
 Share
Go to topic listing
×
×
  • Create New...