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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : HTML - Afficher une image de fond sans répétition

Groody

Utilisez MES smileys §

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

Publicité

faenir

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

Groody

Utilisez MES smileys §

PAs compris

Je l'insère où ?

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

faenir

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

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

Profil supprimé

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

Groody

Utilisez MES smileys §

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

faenir

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

Schimz

Bouge pas, meurs, ressuscite !

:whistle:

Code :

<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

antp

Super Administrateur
Champion des excuses bidons

Schimz a écrit a écrit :

:whistle:

Code :

<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

Groody

Utilisez MES smileys §

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
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

Publicité

Groody

Utilisez MES smileys §

Schimz a écrit a écrit :

:whistle:

Code :

<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 :

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

faenir

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

Groody

Utilisez MES smileys §

Ca fonctionne :jap: .

Donc, le mieux ?

1

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

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

fastclemmy

(re-)Dictateur en plastique

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)

Groody

Utilisez MES smileys §

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

fastclemmy

(re-)Dictateur en plastique

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

Code :

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

Dans ton fichier style.css tu mets :

Code :

body {
background-image: url(image.gif);
background-repeat: no-repeat;
}

Voili

antp

Super Administrateur
Champion des excuses bidons

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

Groody

Utilisez MES smileys §

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 :

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

Dans ton fichier style.css tu mets :

Code :

body {
background-image: url(image.gif);
background-repeat: no-repeat;
}

Voili

Nikel. 2 CSS, et tout, ça fonctionne. MErci !

Antp, Yes, logique :jap:

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

Groody

Utilisez MES smileys §

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

fastclemmy

(re-)Dictateur en plastique

Groody a écrit :

http://www.w3schools.com/css/css_background.asp

Dans ton fichier *.css tu rajoutes la propriété background-position

Code :

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

Ne fonctionne pas sous NS4

Groody

Utilisez MES smileys §

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

fastclemmy

(re-)Dictateur en plastique

Groody a écrit :

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

Groody

Utilisez MES smileys §

Ok. J'ai vu la dif. Ca marche, presque

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

fastclemmy

(re-)Dictateur en plastique

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

Code :

<table class="tableauAvecImageDeFond">
<tr>
<td>...

Dans ton fichier CSS :

Code :

table.tableauAvecImageDeFond
{
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: bottom right;
}

Groody

Utilisez MES smileys §

:jap: BCP

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

Groody

Utilisez MES smileys §

Ca marche très bien, merci.

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

Groody

Utilisez MES smileys §

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

fastclemmy

(re-)Dictateur en plastique

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

Groody

Utilisez MES smileys §

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

fastclemmy

(re-)Dictateur en plastique

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 ?)

Groody

Utilisez MES smileys §

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

fastclemmy

(re-)Dictateur en plastique

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)

Groody

Utilisez MES smileys §

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

fastclemmy

(re-)Dictateur en plastique

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.

Groody

Utilisez MES smileys §

Nan :cry:

Je vais donc devoir utiliser 2 tableaux

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

Groody

Utilisez MES smileys §

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

Groody

Utilisez MES smileys §

J'ai créé un 2e tableau, qui contient le reste.

Prb réglé.

merci

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

Publicité

FORUM HardWare.fr

Graphisme

Web design

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

Sujets relatifs
Image Windows de boot	[très simple]Besoin d'un retoucheur d'image pour changer un texte.
recherche image	Aide sur une image
afficher une photo dans un tableau	Quels sont les défauts de cette image ?
[Reseaux de neurones]Cherche infos sur: compression image	[WebDes] une image d arriere plan pour mon site ?
un coup de main plz, pour cette image :(	Image à trouver très dure (pas google quoi)
Plus de sujets relatifs à : HTML - Afficher une image de fond sans répétition

Page générée en 0.089 secondes