HTML - Afficher une image de fond sans répétition

HTML - Afficher une image de fond sans répétition - Web design - Graphisme

Marsh Posté le 29-11-2002 à 13:22:43    

Hello,
 
Dans le frame de gauche, le menu.
Ce menu est composé de plusieurs lignes (tableau).
 
J'aimerai afficher en fond, collé en haut et à gauche, une image (en fond donc), MAIS qui ne se repette pas en mosaique.
 
 
Comment konfé ? :/
 


---------------
Vidéo Concorde Air France | www.kiva.org
Reply

Marsh Posté le 29-11-2002 à 13:22:43   

Reply

Marsh Posté le 29-11-2002 à 13:30:15    

http://www.w3.org/TR/REC-CSS2/colo [...] properties
 
div {
     background-image: url(images.png);
     background-repeat: no-repeat;
}


Message édité par faenir le 29-11-2002 à 13:31:15

---------------
Boulay officiel : asphro
Reply

Marsh Posté le 29-11-2002 à 13:43:26    

PAs compris :/
 
Je l'insère où ?


---------------
Vidéo Concorde Air France | www.kiva.org
Reply

Marsh Posté le 29-11-2002 à 13:47:28    

ben dans ton css puis tu crée un div qui utilises cette classe


---------------
Boulay officiel : asphro
Reply

Marsh Posté le 29-11-2002 à 13:48:34    

Groody a écrit a écrit :

PAs compris :/
 
Je l'insère où ?




 
 
Tu peux mettre ce code dans une feuille de style attachée (=> style.css )
 
 
et tu crée ensuite un lien avec ta page html  
 
 


<LINK href="style.css" rel="stylesheet" type="text/css">

Reply

Marsh Posté le 29-11-2002 à 13:57:42    

Heu, désolé ..
J'ai créé mon CSS. MAis le code, dans ma page HTML, je le place où et comment ? Body ? Head ?


---------------
Vidéo Concorde Air France | www.kiva.org
Reply

Marsh Posté le 29-11-2002 à 14:09:36    

Fait un truc comme ça:
 
 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD><TITLE>titre</TITLE>
<STYLE type="text/css">
div.menu {
    background-image: url(image.png);
    background-repeat: no-repeat;  
    width: 20%;
}
</STYLE>    
</HEAD>
<BODY>          
<div class="menu">
le menu<br>
bla bla bla<br>
plop<br>
</div>
</BODY>
</HTML>  
 


---------------
Boulay officiel : asphro
Reply

Marsh Posté le 29-11-2002 à 14:16:24    

:whistle:  
 

Code :
  1. <body style="background-image: url(images.png);background-repeat: no-repeat;">


simple, clair et pas HS.


Message édité par Schimz le 29-11-2002 à 14:16:33
Reply

Marsh Posté le 29-11-2002 à 15:03:31    

Schimz a écrit a écrit :

:whistle:  
 

Code :
  1. <body style="background-image: url(images.png);background-repeat: no-repeat;">


simple, clair et pas HS.




 
spa bien :non:
vaut mieux mettre ça dans le CSS, surtout si le CSS est dans un fichier séparé
 
Groody > dès que ça parle de code HTML/CSS tu peux poster sur Prog ;)


Message édité par antp le 29-11-2002 à 15:03:52

---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
Reply

Marsh Posté le 02-12-2002 à 10:28:44    

antp a écrit a écrit :

 
 
spa bien :non:
vaut mieux mettre ça dans le CSS, surtout si le CSS est dans un fichier séparé
 
Groody > dès que ça parle de code HTML/CSS tu peux poster sur Prog ;)




Rohhhhhhhh  :kaola:  
Pour moi, On avait dit que WebDesign = englobe TOUT :D
Et c'est clair, ça me genait de poster ici.
 
merci, je vais essayer dans l'heure :jap:


---------------
Vidéo Concorde Air France | www.kiva.org
Reply

Marsh Posté le 02-12-2002 à 10:28:44   

Reply

Marsh Posté le 02-12-2002 à 10:48:33    

Schimz a écrit a écrit :

:whistle:  
 

Code :
  1. <body style="background-image: url(images.png);background-repeat: no-repeat;">


simple, clair et pas HS.




 
Ca, ça marche bien.
 
 
Par contre, ça, pas du tout :
 
 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD><TITLE>titre</TITLE>
<STYLE type="text/css">
div.menu {
    background-image: url(image.png);
    background-repeat: no-repeat;  
    width: 20%;
}
</STYLE>    
</HEAD>
<BODY>          
<div class="menu">
le menu<br>
bla bla bla<br>
plop<br>
</div>
</BODY>
</HTML>  
 


 
 
Quel est le code pour utiliser le .CSS créé ?
 
 
Et.. c'est supporté par quelleS version des browsers ?


---------------
Vidéo Concorde Air France | www.kiva.org
Reply

Marsh Posté le 02-12-2002 à 11:19:14    

Hein? Ça marche pas? pourtant, c'est la meme chose a part  que le body est remplacé par div.menu essaye  
 
body {
   background-image: url(image.png);
   background-repeat: no-repeat;  
   width: 20%;
}  
 
c'est tout a fait la meme chose maintenant, c'est supporté par tous les navigateurs je pense, c'est vraiment basique.


---------------
Boulay officiel : asphro
Reply

Marsh Posté le 02-12-2002 à 11:30:40    

Ca fonctionne :jap:.
 
 
Donc, le mieux ?
 
1

<STYLE type="text/css">
body {
  background-image: url(image.gif);
  background-repeat: no-repeat;  
  width: 20%;
}  
</STYLE>


 
2

<body style="background-image: url(coin1.gif);background-repeat: no-repeat;">


 
3
Un *.CSS externe ?
 
 
 
 
Quelqu'un sait à propos su support/quelles version de browser ? (IE, NEtscape et à la limite, Opera) (site commercial/prof.).
 


---------------
Vidéo Concorde Air France | www.kiva.org
Reply

Marsh Posté le 02-12-2002 à 11:33:12    

Le mieux c'est une CSS externe.
 
Ce genre de CSS est correctement supporté par tous les browsers 4+ (de toute façon les utilisateurs de NS 4.7 savent bien que le navigateur est une bouse, donc pas de souci)

Reply

Marsh Posté le 02-12-2002 à 11:38:37    

Oki. Peux-tu m'indiquer quel est el code HTML (quelle zone, code) à utiliser pour utiliser mon CSS stp ?


---------------
Vidéo Concorde Air France | www.kiva.org
Reply

Marsh Posté le 02-12-2002 à 11:51:34    

Et bien comme le disait fort à propos Ultra Bestial tu mets ça dans le HEAD de ton fichier HTML
 

Code :
  1. <LINK href="style.css" rel="stylesheet" type="text/css">


 
Dans ton fichier style.css tu mets :
 

Code :
  1. body {
  2. background-image: url(image.gif);
  3. background-repeat: no-repeat; 
  4. }


 
Voili
 

Reply

Marsh Posté le 02-12-2002 à 11:52:57    

l'intérêt du CSS externe c'est surtout de pouvoir utiliser le même fichier CSS pour plusieurs/toutes les pages du site :)


---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
Reply

Marsh Posté le 02-12-2002 à 12:17:05    

fastclemmy a écrit a écrit :

Et bien comme le disait fort à propos Ultra Bestial tu mets ça dans le HEAD de ton fichier HTML
 

Code :
  1. <LINK href="style.css" rel="stylesheet" type="text/css">


 
Dans ton fichier style.css tu mets :
 

Code :
  1. body {
  2. background-image: url(image.gif);
  3. background-repeat: no-repeat; 
  4. }


 
Voili
 
 




 
Nikel. 2 CSS, et tout, ça fonctionne. MErci ! :)
 
 
 
 
 
Antp, Yes, logique :jap:


---------------
Vidéo Concorde Air France | www.kiva.org
Reply

Marsh Posté le 16-12-2002 à 11:44:22    

Et ...
 
Comment afficher une image dans le bas-droit, en fond, d'un tableau.
 
(tableau présent dans chaque page de contenu, de 600 pixels de larges, contenant toutes les infos. 1 par page. Donc un CSS aussi serai bien pratique).
 
:jap:


---------------
Vidéo Concorde Air France | www.kiva.org
Reply

Marsh Posté le 16-12-2002 à 11:51:05    

Groody a écrit :

Et ...
 
Comment afficher une image dans le bas-droit, en fond, d'un tableau.
 
(tableau présent dans chaque page de contenu, de 600 pixels de larges, contenant toutes les infos. 1 par page. Donc un CSS aussi serai bien pratique).
 
:jap:


 
http://www.w3schools.com/css/css_background.asp
 
Dans ton fichier *.css tu rajoutes la propriété background-position
 

Code :
  1. table
  2. {
  3. background-image: url(image.gif); 
  4. background-repeat: no-repeat;   
  5. background-position: bottom right;
  6. }


 
Ne fonctionne pas sous NS4

Reply

Marsh Posté le 16-12-2002 à 11:53:03    

C'est autre chose que je désire là.
Je veux garder le premier CSS pour utiliser mon image de fond, qui ne se répete pas, ainsi (en + donc) une autre, en bas à droite.
 
Je fais un 2e CSS ?
Je la déclare comment dans le tableau ?


---------------
Vidéo Concorde Air France | www.kiva.org
Reply

Marsh Posté le 16-12-2002 à 11:58:05    

Groody a écrit :

C'est autre chose que je désire là.
Je veux garder le premier CSS pour utiliser mon image de fond, qui ne se répete pas, ainsi (en + donc) une autre, en bas à droite.
 
Je fais un 2e CSS ?
Je la déclare comment dans le tableau ?


 
Tu gardes ton fichier CSS précédent et tu rajoutes ce que j'ai mis dans mon post précédent à la suite...

Reply

Marsh Posté le 16-12-2002 à 12:03:39    

Ok. J'ai vu la dif. Ca marche, presque :D
 
Comment le lier à un seul tableau ?
Car si j'en ai d'autres dans le principal, ils se le prennent tous.


---------------
Vidéo Concorde Air France | www.kiva.org
Reply

Marsh Posté le 16-12-2002 à 12:05:27    

Dans ton HTML, sur le tableau auquel tu veux appliquer la CSS :
 

Code :
  1. <table class="tableauAvecImageDeFond">
  2. <tr>
  3. <td>...


 
Dans ton fichier CSS :
 

Code :
  1. table.tableauAvecImageDeFond
  2. { 
  3. background-image: url(image.gif); 
  4. background-repeat: no-repeat;   
  5. background-position: bottom right;
  6. }

Reply

Marsh Posté le 16-12-2002 à 12:06:10    

Reply

Marsh Posté le 16-12-2002 à 12:09:44    

Ca marche très bien, merci.


---------------
Vidéo Concorde Air France | www.kiva.org
Reply

Marsh Posté le 20-01-2003 à 16:17:32    

Mmmmmmm
 
J'utilisais jusque là ceci :
 
 

body {  
     background-image: url(fond2.gif);  
     background-repeat: no-repeat;    
  }
 
 
table.Fond
  {  
    background-image: url(coin2.gif);    
    background-repeat: no-repeat;      
    background-position: bottom right;
  }


 
fond2.gif était en fond de page, par dessus lequel il y a (dans chaque page, un tableau de 600 pixel de large (pour cadrer le contenu de toutes mes pages)).
 
Je dois virer la couleur de fond de la page, pour la laisser blanche, et donner une couleur au contenu du tableau (partie qui accueil le contenu du site). Depuis, mon fond2.gif est passé en arrière plan par rapport à la couleur du tableau.
 
 
J'ai essayé un :
 

table.Fond
  {  
    background-image: url(fond2.gif);    
    background-repeat: no-repeat;      
    background-position: top left;
  }
 
table.Fond
  {  
    background-image: url(coin2.gif);    
    background-repeat: no-repeat;      
    background-position: bottom right;
  }


et je n'ai que coin2.gif qui apparait.
 
Si je ne laisse que la 1ere partie du CSS, ça passe.
 
 
Comment faire ?
:jap:


---------------
Vidéo Concorde Air France | www.kiva.org
Reply

Marsh Posté le 20-01-2003 à 16:19:13    

Pourquoi tu as ton table.Fond en double dans ta CSS ?

Reply

Marsh Posté le 20-01-2003 à 16:20:39    

Car je n'y comprends rien, et je ne sais pas comment faire.
 
J'avais essayé de le virer (le 2e) pour laisser les 2 portions de code ensemble, et marche pas non plus.


---------------
Vidéo Concorde Air France | www.kiva.org
Reply

Marsh Posté le 20-01-2003 à 16:22:43    

Concrètement, tu veux quoi ?
Pour le fond :
- telle couleur
- telle image (éventuellement pas d'image d'ailleurs)
 
Pour ton tableau :
- telle couleur
- telle image (éventuellement pas d'image d'ailleurs)
 
(t'as une URL pour qu'on voit plus concrètement le pb ?)

Reply

Marsh Posté le 20-01-2003 à 16:25:52    

Avant ma 1ere image s'afichait dans le fond.
 
J'ai viré la couleur de fond, pour ne rien mettre.
 
J'ai rajouté la couleur dans le tableau, et moin image de fond ne s'affiche plus.
 
 
J'aimerai afficher une couleur dans le tableau, ainsi qu'une image en bas à droite, et une image en haut comme fond de tableau, sur la couleur.


---------------
Vidéo Concorde Air France | www.kiva.org
Reply

Marsh Posté le 20-01-2003 à 16:38:32    

Citation :

'background-image'  
Value:   <uri> | none | inherit  
Initial:   none  
Applies to:   all elements  
Inherited:   no  
Percentages:   N/A  
Media:   visual  
 
This property sets the background image of an element. When setting a background image, authors should also specify a background color that will be used when the image is unavailable. When the image is available, it is rendered on top of the background color. (Thus, the color is visible in the transparent parts of the image).
 
(source W3C)


 
Il faut donc que ton image soit un GIF transparent ou un PNG transparent (mais moyennement supporté par IE par exemple)

Reply

Marsh Posté le 20-01-2003 à 16:41:36    

J'utilise déjà un GIF transparent.
 
 
Je pense que le prb vient du code, car je ne sais pas comment afficher 2 GIFs dans le même tableau.


---------------
Vidéo Concorde Air France | www.kiva.org
Reply

Marsh Posté le 20-01-2003 à 16:42:46    

Groody a écrit :

J'utilise déjà un GIF transparent.
 
Je pense que le prb vient du code, car je ne sais pas comment afficher 2 GIFs dans le même tableau.


 
Tu ne peux pas. Tu ne peux spécifier qu'une image en background par élément.

Reply

Marsh Posté le 20-01-2003 à 16:44:33    

Nan :cry:
 
Je vais donc devoir utiliser 2 tableaux :/


---------------
Vidéo Concorde Air France | www.kiva.org
Reply

Marsh Posté le 20-01-2003 à 16:53:19    

table.Fond
  {  
    background-image: url(fond2.gif);    
    background-repeat: no-repeat;      
    background-position: left top;
  }
 
  {  
    background-image: url(coin2.gif);    
    background-repeat: no-repeat;      
    background-position: right bottom;
  }


 
Je n'ai que fond2.gif qui apparait.
 
Bon, je vais créer une 2e tableau qui contiendra tout le reste.


---------------
Vidéo Concorde Air France | www.kiva.org
Reply

Marsh Posté le 20-01-2003 à 17:12:33    

J'ai créé un 2e tableau, qui contient le reste.
 
Prb réglé.
 
merci


---------------
Vidéo Concorde Air France | www.kiva.org
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed