Jump to content

[résolu] Insérer une image dans le <body>

CaZz
 Share

Recommended Posts

CaZz Newbie

CaZz

Posted
Posted (edited)

Bonjour,

 

bon ma question est quasiment demandé dans le titre, mais je vais développer un peu.

 

Je souhaite sur ma boutique insérer une image en fond, qui prendrait la taille de la fenêtre.

Je me suis souvenue d'une fonction le faisant (depuis CSS3 <3) : background-size : 100% 100% .

 

Cependant et voilà mon problème, Internet Explorer qui est tellement génial ne connais pas le CSS3.

J'ai donc cherché une alternative, et essayé directement sur une page vierge dans IE ce bout de code :

 



<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
	<style type="text/css">
	 img
	 {
		 position : absolute;
		 top : 0;
		 left : 0;
		 width : 100%;
		 height : 100%;
		 z-index : -1;
	 }
	</style>
</head>
<body class="gradient" style="height:1024px">
	<img src='css/img/bckg.png' />
	<div>TODO write content</div>
</body>
</html>

 

Cela marche sous IE et je suis comblé. Maintenant j'ai essayé donc d'insérer mon image sur ma boutique, donc dans le header.tpl juste après <body> et là je coince.

Que faut-il mettre comme url à l'image, sachant que je l'avais push dans le ftp (je suis en local pour info) dans le dossier thème/monNomDeThème/img.

 

J'ai essayer <img id="bckg" src='img/bckg.png' /> , <img id="bckg" src ='../img/bckg.png' /> et d'autre encore mais rien de marche.

 

Sous Firefox, il me dit que l'url de l'image est invalid.

Je viens donc vers vous pour savoir si vous ne savez pas comment faire pour résoudre ce problème.

 

Dans l'attente d'une réponse assez rapidement =) Je vous remercie !

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

CaZz

Posted
  • Author
Posted (edited)

Merci de votre réponse.

Je vais essayer avec l'url complète et je vous dirais le résultat.

 

Dans mon exemple le premier niveau est css car sur mes tests je met mes mon dossier /img dans /css, certes ce n'est peu être pas logique mais c'est mon habitude =) .

Cependant le dossier /img sous prestashop est bien dans /themes/monTheme/img

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

CaZz

Posted
  • Author
Posted (edited)

Merci beaucoup ckarone.

Je n'avais pas pensé à cette solution aussi simple soit-elle.

On devrait utiliser les bases avant de prendre des raccourcis :)

 

Pour ceux qui auront le même problème, cette façon est une parmi plusieurs autres solutions.

N'oubliez pas de mettre une class ou un id à votre image.

Pour la src si c'est en local : http ://127.0.0.1/prestashop/themes/votreTheme/img/votreImage.jpg , et si c'est en ligne je regarderai mais ça doit être comme ckarone la mis.

 

Même conseils : attention au poid et à la taille de l'image (en tant qu'utilisateur d'internet 1Mo je pleure sur des sites avec des images qualité +++ :D )

 

Je surveille toujours ce sujet si vous avez des questions.

 

Cordialement,

CaZz - Web developper *beginner*

 

ps : je passe le sujet en [résolu]

Edited by CaZz (see edit history)
Link to comment
Share on other sites
  • 1 year later...
baloux Newbie

baloux

Posted
Posted

Bonjour,

 

Je suis relativement novice sur prestashop et je m’interroge également sur la bonne façon de procéder pour insérer une image de fond au sein d'une page.

Pour ma part je souhaite ajouter une (ou plusieurs) images de fond sur certaines pages CMS de mon site (pas toute!). Il s'agira en fait de petites icones en png transparent, donc relativement légères afin d'avoir un rendu plus sympa pour ma rubrique "Comment ça marche" par exemple.

 

D'après votre post (qui est très clair d'ailleurs, je vous remercie !), j'ai l'impression de toucher du doigt une piste intéressante pour ma problématique (je cherche déjà depuis plusieurs jours...).

 

Voici un état des lieux pour vous donner plus de visibilité :) , étape par étape:

1 - j'ai hébergé mon image dans le repertoire "img" de mon thème sur mon ftp

2 - j'ai fait le test avec votre bout de code dans le notepad (enregistré en html) et j'ai bien mon texte qui s'affiche sur mon image, ca semble donc bien fonctionner avec l'url de mon image hébergé sur mon serveur.

3 - à la suite de ça, j'ai tenté de copier coller ce bout de code directement dans le code html de ma page CMS (à partir du back office prestashop) -> résultat, le code html change au moment de l'enregistrement, ce qui fait que l'image ne s'affiche pas sur le texte mais au dessus du texte...

4 - je comprends qu'il faut également intervenir en parallèle soit au niveau du fichier cms.css soit au niveau du fichier cms.tpl afin de créer un style ou une classe et ainsi appeler uniquement l'ID de la page concernée à chaque fois.

Par contre là je suis totalement perdu sur le type de code à intégrer ici...

 

Je me rend compte que je demande beaucoup ici, mais je vous serai vraiment TRES reconnaissant si vous avez la possibilité de m'aiguiller sur la bonne marché à suivre. .

 

Merci d'avance, et n'hésitez pas si je peux à mon tour vous aider sur quoique ce soit, j'en serai ravi !

encore merci !

Baloux.

Link to comment
Share on other sites
baloux Newbie

baloux

Posted
Posted

Bonjour,

 

Quelqu'un peut m'aider svp?? - je peux payer la personne qui m'aiguillera sur cette partie.

 

j'utilise dreamweaver, je n'ai donc pas besoin d'aide sur la création de mes pages html, j'ai juste besoin de savoir où placer ces bouts de code dans prestashop.

 

Encore une fois merci bcp.

Baloux

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...