Une image en fond de la page d'accueil

Information importante

En raison d'un grand nombre d'inscriptions de spammers sur notre site, polluant sans relache notre forum, nous suspendons la création de compte via le formulaire de "sign up".

Il est néanmoins toujours possible de devenir adhérent•e en faisant la demande sur cette page, rubrique "Inscription" : https://www.drupal.fr/contact


De plus, le forum est désormais "interdit en écriture". Il n'est plus autorisé d'y écrire un sujet/billet/commentaire.

Pour contacter la communauté, merci de rejoindre le slack "drupalfrance".

Si vous voulez contacter le bureau de l'association, utilisez le formulaire disponible ici, ou envoyez-nous un DM sur twitter.

Bonjour ,
je crois avoir vu quelque part un site avec un fond non pas de couleur mais d'image / photos , façon poster.
Faut il pour ça un thème particulier ? Si oui quel est ce thème ? ( Je ne parle pas du logo mais du fond même de la page )
Merci d'avance .

Version de Drupal : 

Dans ton CSS tu met ceci

body{
background:transparent url('../images/monfond1.jpg') top left repeat;
}

t'as juste à vérifié le fond

autre solution si tu ne veut appliquer l'image qu'a un div et faire en sortes qu'il soit au milieu du peut mettre ca

mondiv{

background:#FFF url("../images/monfondcentre1.jpg") no-repeat scroll center top;
}

regarde ces exemples

pour le site de la maison blanche (hmm hmm fait avec drupal!)

http://www.whitehouse.gov/

#wh-blogs {
    background: url("http://www.whitehouse.gov/files/images/blog/blogs_tout_header.jpg") no-repeat scroll center top #FFFFFF !important;
    padding-top: 25px !important;
    text-align: left !important;
}

sur allocinema

http://www.allocine.fr/

background-image: url("http://www.commeaucinema.com/images/newbans/Hab_ff5.jpg");
background-position: center top;
background-repeat: no-repeat

Sur fun radio

http://www.funradio.fr/

body {           
background-color:#000000;         
background-image:url('http://media.rtl.fr/online/image/2011/0421/7679279198_skin-gaga.jpg');        
background-position:center top;
background-repeat:no-repeat;
background-attachment:scroll;
}

Bien sur manque de pot! j'tai mis des exemples ou tu as pas de répétition de l'image
généralement si tu veux que l'image se répate soit doit être une image parfaitement bien agencé
c'est à dire qu'entre les répétitions tu ne remarque pas de coupure (c'est ce qu'on peut appeler des pattern)
et donc je termine en disant que si jamais tu désires un patterns à utiliser en fond de site web (avec dont un background-repeat: repeat;)

tu peux consulter ce site:
http://patterns.ava7.com/

je pense que ca t'aidera, y a encore beaucoup a dire su les fond d'image (les repeat-x ou repeat-y, les hack pour internet explorer, les fond fixe ou mobile).

J'espère que ca t'aidera
Cordialement
___________________________________ BenFarhat Elyes

Merci BenFarhat ,
ils sont superbes tes papiers-peints . Ce sera pour une autre idée .
Là , je cherche à placer une photo un peu comme un fond de l'écran .
Mais dans mon Bartik (le style) j'ai 10 fichiers .css . C'est dans lequel que je dois saisir la commande ?
Merci d'avance

Sous le répertoire CSS dans le fichier style.css
dans les attribut relatif à la partie body

body {
  line-height: 1.5;
  font-size: 87.5%;
  word-wrap: break-word;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

sinon n'importe ou ailleurs (dans un autre CSS) mais il faudra que tu rajoute un !important à la fin comme ca

body
{
background:#FFF url("../images/fond-ecran.jpg") top left repeat !important;
}

le !important, te permet de donné un poids supérieur.

le css Cascade style sheet, dans cascade rappelle toi que c'est une lecture atribut après l'autre
donc si dans un même fichier tu redéfini deux fois le même attribut background (par exemple) pour la balise body ca sera la dernière qui sera pris en compte
si tu définis cette attribut dans deux fichiers, ce sera celui qui est dans le dernier fichier chargé qui sera pris en compte.

Et si tu rajoutes un !important, ben (en principe) quelques soit les autres endroit ou cet attribut est définis, c'est celui avec un !important qui l'emporte.

tu as remarqué que j'ai mis le "en principe" pour dire, qu'il faut y aller molo avec ce terme, car si tu met important partout alors tu reviens à la case départ et tu revois le dernier élément css chargé.
j'espère que c'est claire :)

Voili Voilou!!

PS:
si ton site risque d'avoir une direction RTL en utilisant une langue tel que l'arabe qui va de droite à gauche (ou pour une quelconque autre raison) tu doit aussi (je pense) mettre une définition dans le fichier style.css, MAIS QUE SI CA CHANGE
je m'explique, si ton site est français arabe
et que dans ton fond il y a écris un truc en français genre bienvenu ou je sais pas trop, alors cette image tu la défini dans style.css
par contre si tu veut lors de l'utilisation du RTL un autre fond d'écran (si on peut appeler ca comme ca) alors tu doit redéfinir la balise body dans style-rtl.css (si le fond est le même c'est pas la peine).

Cordialement
_______________________________________ BenFarhat Elyes

ben en fait tu doit donnée un chemin relatif par rapport a ton fichier css

Le répertoire du thème bartik que tu utilise comprend les répertoires suivant (le repertoire fond c'est moi qui l'as rajouté pour éxpliqué):
bartik
|
|_ color
|_ css
|_ images
| |
| |fond
|
templates

tes fichiers .css sont dans le répertoire css voici les cas:

1- si tu met tes images dans le repertoire CSS (le même que le fichier css alors tu mettra ceci

background:#fff url("monimage.jpg") top letf repeat;

2- si tu met tes images dans le répertoire BARTIK (le répertoire racine ou parent, alors pour dire que tu va revenir en arrière tu mais ".." )

background:#fff url("../monimage.jpg") top letf repeat;

3-si tu met tes images dans le répertoire IMAGES (alors tu met .. pour dire que tu remonte a bartik puis tu met le slash puis le répertoire images)

background:#fff url("../images/monimage.jpg") top letf repeat;

4-si tu met tes images dans le répertoire FOND (alors tu met .. pour dire que tu remonte a bartik puis tu met le slash puis le répertoire images, puis un autre slash puis le répertoire fond)

background:#fff url("../images/monimage.jpg") top letf repeat;

donc a toi de voir, l'idéal serait sous images et de créer des sous répertoire pour le fond, les boutons, les flèches, les titres, les images d'articles etc etc

Voila :)
Bonne continuation
_________----------- BenFarhat Elyes

Bonjour ,
je viens de faire l'installation de mon image de fond de l'écran , mais hélas je n'ai aucun résultat .

J'ai pourtant bien placé mon image dans le répertoire /images . Puis j'ai saisi dans mon fichier style.css le background:transparent url(‘../images/monfond1.jpg’) top left repeat ;

Où fais-je l'erreur ?

Je n'ai pas "vérifié le fond" comme tu le préconises . Mais c'est parce que je ne sais pas comment faire . . .
Par ailleurs , je ne trouve aucune trace de mon image dans paramètres de mon Bartik ? Est-ce normal ?
Il y a peut être question de taille de mon image ? La mienne .jpg fait 1,6 Mo . Est-ce correct ?

Merci d'avance .

Oulalalala :)

Bien une petite intro sur l'ex gros problème des webdesigner

Du temps de mon arrière grand mère, les connexion internet n'était pas rapide, c'était bien avant l'ADSL on utilise les lignes téléphonique avec un modem qui faisait un bruit horrible à la connexion, mais si doux a entendre :)
bref les débits pratique était de quelques dizaines de kilos
et donc impérativement on demandé à tous les webdesigner de nous concocter une page dont la taille était la plus faible possible (en terme de ko), avec les débuts de l'ADSL on avait encore ce petit soucis qui a commencé a disparaitre avec les 8Mega 20 mega et plus!
ton images fait 1.6Mo
les fournisseurs d'accès Internet pour gonfler leur services internet nous offre des vitesse en kilos, donc ton 1.6Mo en fait c'est du 12.8Mbits
ce qui veut dire que celui qui a un débit de 512kbits attendra 25 secondes!!! juste pour le chargement de ton fond (et n'oubli pas qu'il y aura aussi du temps de chargement pour le reste de ton contenu!!) et une trop longue attente agace!!!

DONC FAUT EVITER même si on est moins sévère qu'avant, je trouve que 1.6Mo c'est éxagéré donc optimise tes images au maximum
regarde l'image utilisé par la maison blanche
www.whitehouse.gov fait 47.3 ko

celle de feedstitch
http://feedstitch.com/ fait 160ko

http://www.darasgarden.com/ fait 94.3ko

http://kulturbanause.de/ fait 387 ko

http://www.dannwhittakercreative.com/ fait 275ko

bon j'arrête

donc essait d'avoir ces valeurs la!!!
entre 50 et disons 300ko
ne cherche pas une taille trop petite ou tu risque de perdre en qualité, et ne cherche pas trop grand ou tu risque de perdres en performances (capacité à répondre rapidement aux internautes)

tu peut utiliser du jpg comme tu le fait, qui est une compression sans perte de donnée et une compression à 60% est parfaite
ca demandera ca quand tu voudra enregistrer ton image

De plus en terme de résolution ne cherche pas trop grand
si tu regarde bien les designers s'amuse a diminuer le nombre de couleurs dominantes (pour permettre une meilleur compression) et parfois tu as une images qui faite de taille disons au pif 3000pixels sur 3000 alors qu'en faite la partie qui change n'est que de 400px * 300px et le reste est un motif qu'il repète ou alors une couleur

comme ici
http://www.dannwhittakercreative.com/
l'image de fond est
http://www.dannwhittakercreative.com/images/back.jpg
le truc c'est que lorsque tu regarde le site tu te dis que la partie sombre c'est l'image alors qu'en faite non!!
il fait tout pour qu'un fois arrivé au 4 bord il a une couleur unique qu'il utilise dans son css
dans son cas à lui c'est le noir du fonc d'ecran:

body {
   background-color: #000000;
}
#site_container {
height: 790px;
width: 900px;
  text-align: center;
    background-image: url(images/back.jpg);
...
...
}

A présent en ce qui concerne ton problème, es tu sur que le nom de ton fond est monfond1.jpg??? moi j'avais mis ca en exemple donc tu doit bien mettre le nom de ton image correctement écris en essayant d'éviter les majuscules (c'est pas grave mais on sait jamais (surtout avec les serveur linux qui font la différence par defaut de la casse)

donc deux chose
1 - diminue au maximum la taille de ton arrière plan en terme de ko est de résolution
2 - vérifie bien le nom de ton fichier arrière plan, sinon
change ton background avec ca

background:#000;

si le fond de ton site n'est pas noir c'est que le problème est au niveau de la visibilité du css (mauvais selecteur par exemple) ca serait chouette de me donner une plus grosse portion de ton css que je puisse mieux t'aider
:)
J'attend ta réponse :)
_____________________________ BenFarhat Elyes

Merci BenFarhat ,
je viens de changer de l'image : monfond1.jpeg ne pèse , à présent , que 40Ko , n'est qu'entre blanc et bleu , et ses dimensions sont de 700x525 .

Mon fichier Bartik/css/style.css comporte à présent ça :

/* $Id: style.css,v 1.53 2011/01/04 06:23:29 dries Exp $ */

/* ---------- Overall Specifications ---------- */

body {
line-height: 1.5;
font-size: 87.5%;
word-wrap: break-word;
margin: 0;
padding: 0;
border: 0;
outline: 0;
background:transparent url(‘../images/monfond1.jpeg’) top left repeat ;
}
a:link,
a:visited {
text-decoration: none;
}
a:hover,
a:active,
a:focus {
text-decoration: underline;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 1.0em 0 0.5em;
font-weight: inherit;
}
h1 {
font-size: 1.357em;
color: #000;
}
h2 {
font-size: 1.143em;
}
p {
margin: 0 0 1.2em;
}
del {
text-decoration: line-through;
}
tr.odd {
background-color: #dddddd;
}
img {
outline: 0;
}
code,
pre,
kbd,
samp,
var {
padding: 0 0.4em;
font-size: 0.77em;
font-family: Menlo, Consolas, "Andale Mono", "Lucida Console", "Nimbus Mono L", "DejaVu Sans Mono", monospace, "Courier New";
}
code {
background-color: #f2f2f2;
background-color: rgba(40, 40, 0, 0.06);
}
pre code,
pre kbd,
pre samp,
pre var,
kbd kbd,
kbd samp,
code var {
font-size: 100%;
background-color: transparent;
}
pre code,
pre samp,
pre var {
padding: 0;
}
.description code {
font-size: 1em;
}
kbd {
background-color: #f2f2f2;
border: 1px outset #575757;
margin: 0 3px;
color: #666;
display: inline-block;
padding: 0 6px;
-khtml-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
pre {
background-color: #f2f2f2;
background-color: rgba(40, 40, 0, 0.06);
margin: 10px 0;
overflow: hidden;
padding: 15px;
white-space: pre-wrap;
}

/* ------------------ Fonts ------------------ */

Mais toujours pas de trace de mon image dans ma page d'accueil !

Et que dois-je entrer dans la case de Parametres, Couleurs, Fond de l'écran ?

ton css est faux!

avant d'en parler je désirerais corriger une grosse anerie que j'ai dit plus tôt, quand je parlait de perte de donnée je voulais dire que tu devais compresser en essayant de ne pas perdre en qualité.
et pour ma demande de 60% de taux de compression, c'est exagéré si l'image est complexe, je ne pense (personnellement pas) qu'elle affectera la qualité de ton image si les couleurs utilisé sont peu nombreuse (dans ton cas bleu et blanc seulement c'est parfait)
Voila, ceci étant dit

bien pour revenir a ton CSS

voici les erreur au niveau de la balise body

body {
line-height : 1.5 ; /* ici tu doit dire 1.5 quoi? em, pixels ... /
font-size : 87.5% ;
word-wrap : break-word ;
margin : 0 ;
padding : 0 ;
border : 0 ;
outline : 0 ;
background:transparent url(‘../images/monfond1.jpeg’) top left repeat ; /ICI :) tu dois utiliser entre tes accolades qui contiennent l'url la même quotte en ouverture et fermeture genre ('../images/monfond1.jpeg') ou ("../images/monfond1.jpeg")*/
}
voila je pense qu'après ca ca ira

Pour les tailles de police mon conseil perso c'est d'utiliser les "em" et de mettre un line-height qui fait à peu prés le double, dans mon cas je trouve ca plus lisible ,quand il s'agit d'une police standard bien sur! si tu utilises css3 et font-face pour intégré des polices perso alors ca doit être une sorte de compromis: Faire un line-height qui va avec ta nouvelle police et qui par la même occasion viens avec la première police standard (dans la liste des font-family) qui sera utilisé par les navigateurs ne supportant pas CSS3.

j'attends ta réponse :)

voila :) bonne continuation

Merci BenFarhat :

Et voici ma balise body à présent , dans le fichier Bartik/css/style.css , suivant tes conseils :

body {
line-height: 1.5 em ;
font-size: 87.5%;
word-wrap: break-word;
margin: 0;
padding: 0;
border: 0;
outline: 0;
background:transparent url(‘../images/monfond1.jpeg’) top left repeat ;
}

J'y ai ajouté juste le "em" au line-height: 1.5

Quant au :

/ICI :) tu dois utiliser entre tes accolades qui contiennent l’url la même quotte en ouverture et fermeture genre (‘../images/monfond1.jpeg’) ou («../images/monfond1.jpeg»)*/

quelque chose m'échappe car je ne vois pas de quelle erreur tu parles ...

Toujours est-il que chez moi l'image n'apparait toujours pas du tout .

Il y a peut-être une erreur ailleurs ...

Qu'en penses-tu ?

En effet, c'est sur drupalfr apparemment le site converti les simples quottes en première ouvrante et deuxième fermante (du moins quand tu fais copier coller sur notepad++ tu le vois mieux).

Bref la question que je me pose c'est est ce que ton fichier est prise en compte
essait de faire juste dans ton body un :
background-color:red;

et observe si le fond deviens rouge?
sinon regarde le source de la page affiché sur ton navigateur charge ton css?
(ou via firebug)
si non regarde dans ton fichier .info s'il y apparait ?

j'attend ta réponse :)

Non , le fond ne devient pas rouge .
Le fond principal reste , dans : Accueil » Administration » Apparence » Paramètres reglé sur #ffffff

Je n'ai pas compris quoi regarder dans mon css .

Voici mon bartik.info :

; $Id: bartik.info,v 1.5 2010/11/07 00:27:20 dries Exp $

name = Bartik
description = A flexible, recolorable theme with many regions.
package = Core
version = VERSION
core = 7.x

stylesheets[all][] = css/layout.css
stylesheets[all][] = css/style.css
stylesheets[all][] = css/colors.css
stylesheets[print][] = css/print.css

regions[header] = Header
regions[help] = Help
regions[page_top] = Page top
regions[page_bottom] = Page bottom
regions[highlighted] = Highlighted

regions[featured] = Featured
regions[content] = Content
regions[sidebar_first] = Sidebar first
regions[sidebar_second] = Sidebar second

regions[triptych_first] = Triptych first
regions[triptych_middle] = Triptych middle
regions[triptych_last] = Triptych last

regions[footer_firstcolumn] = Footer first column
regions[footer_secondcolumn] = Footer second column
regions[footer_thirdcolumn] = Footer third column
regions[footer_fourthcolumn] = Footer fourth column
regions[footer] = Footer

settings[shortcut_module_link] = 0

; Information added by drupal.org packaging script on 2011-01-05
version = "7.0"
project = "drupal"
datestamp = "1294208756"

Qu'en penses-tu ?

je met du temps a repondre parce que je regarde en même temps le thème bartik comment il est fait.

Y'a aussi un fichier layout.css, j'ai regardé en pensant qu'une div prenait toute la largeur la page mais non! (juste 960px)

donc toujours dans ton style.css la ou tu as fait:
background-color:red ;
rajoute un "!important" à la fin comme ca:

background-color:red !important;

a toi :)

Je viens de copier-coller le texte

background-color:red !important ;

/* ---------- Overall Specifications ---------- */

body {
line-height: 1.5 em ;
font-size: 87.5%;
word-wrap: break-word;
margin: 0;
padding: 0;
border: 0;
outline: 0;
background-color:red !important ;
}

sans résultat .

?

je penses avoir trouver a toi de me le confirmer le réponse

fichier color.css à partir de la ligne 12
tu as ca

#page, #main-wrapper, #main-menu-links li a.active, #main-menu-links li.active-trail a {
   background: none repeat scroll 0 0 #FFFFFF;
}

tu change la ligne correspondante avec tes attributs css

#page,
#main-wrapper,
#main-menu-links li a.active,
#main-menu-links li.active-trail a {
  background:transparent url(‘../images/monfond1.jpeg’) top left repeat !important;
}

ca devrait marcher :) j'croise les doigts

Je suis vraiment désolé . Pour Toi aussi !

Voilà mon color.css :

/* $Id: colors.css,v 1.10 2011/01/04 05:24:13 webchick Exp $ */

/* ---------- Color Module Styles ----------- */

body,
body.overlay {
color: #3b3b3b;
}
.comment .comment-arrow {
border-color: #ffffff;
}

page,

main-wrapper,

main-menu-links li a.active,

main-menu-links li.active-trail a {

background:transparent url(‘../images/monfond1.jpeg’) top left repeat !important;
}
.tabs ul.primary li a.active {

Et ce changement n'a rien apporté . Il y a peut-être une certaine influence sur le réglage de de couleurs à partir de Accueil » Administration » Apparence » Paramètres ...

Moi-même je m'étonne de cette impossibilité d'influencer le fond .
Il y a peut-être là un malentendu ?
Mais lequel ?

pardon un dernier test met dans color.css la ligne

background-color: red !important;

au lieu de background:transparent url(‘../images/monfond1.jpeg’) top left repeat !important ;
si ca fonctionne c'est qaue ton problème est dans le nom de fichier

si ca ne fonctionne pas essai un autre thème :(
sinon ... bennnn ... le mieux a faire serait de faire ton propre thème, je peut t'accompagner dans les différentes étapes et au moins tu auras une maîtrise totale de ton thème.

C'est comme tu veux :) on est la pour ca

en attendant ta réponse essai juste de mettre le background-color à red

:)

Bienvenue sur Drupal express :)

Bien ben je vais dire un truc au pif

si t'es sur que l'image est bel et bien sous le répertoire images et que son nom est correctement écrit alors vérifie si l'extension n'est pas plutôt .jpg que .jpeg.

sinon met l'images dans le même répertoire que ton css et écrit directement le nom dans l'URL (sans le slash et les petits points

...
background:transparent url(monfond1.jpeg’) top left repeat !important ;
...

:)

Je viens de renommer ma photo , la placer dans le répértoire /bartik/css et j'ai saisi dans mon fichier /bartik/css/colors.css :

/* $Id: colors.css,v 1.10 2011/01/04 05:24:13 webchick Exp $ */

/* ---------- Color Module Styles ----------- */

body,
body.overlay {
color: #3b3b3b;
}
.comment .comment-arrow {
border-color: #ffffff;
}

page,

main-wrapper,

main-menu-links li a.active,

main-menu-links li.active-trail a {

background:transparent url('lefond.jpg') top left repeat !important ;
}
.tabs ul.primary li a.active {
background-color: #ffffff;

Et mon fond est toujours rouge rouge ...

La nuit va peut-être porter le conseil ?
Qu'en penses tu BenFarhat ?

heuh??? comment ca rouge???
pourtant t'as enlevé le red!!!!

pardon ... essai de remettre comme c'étaitu au début

#page,
#main-wrapper,
#main-menu-links li a.active,
#main-menu-links li.active-trail a {
  background: background:blue url(‘lefond.jpg’) top left repeat !important ;
}

et rajoute juste aprés (une fois que tu as remis ca sera vers la ligne 17,18 19 selon l'espace que tu auras fait et (donc) rajoute ca:

#page,
#main-wrapper {
  background: #ffffff;
}

pourquoi? tu me diras! et bien en fait la première changer les backgrounds des deux plus gros div (j'ai pas vérifier qui contient l'autre), et on s'en fou que les lien dans ton menu aient aussi comme background ton image (il vaut mieux les laissé comme ca, et si c'est des tabs rajouter du css3 pour faire les bordures hautes arrondi (on le fera une fois le problème réglé)

donc vérifie que tu as bien après c'est opération, soit ton image, soit un fond bleu, sinon a tout hasard, essai de vider le cache via le module devel ou dans ce qui est équivalent au menu drupal 7 (performance)
bonne continuation , j'attend ta réponse :)

Merci infiniment BenFarhat pour le temps que tu m'a déjà consacré .
J'ai beaucoup appris et compris grâce à toi .

Ce soir je me dis qu'il serait , peut-être , plus judicieux de m'attaquer à un thème plus simple que le Bartik . ( C'était d'ailleurs ta suggestion à toi..)
Et justement je viens de découvrir le thème Zen qui permet , si j'ai bien compris , de monter son thème à partir de presque rien .
Je commencerai par installer mon "fond de l'écran" ...

Alors dès que je cale je viens sur ce forum pour chercher de l'aide .

Qu'en penses tu ?

Pardon de la façon avec laquelle je vais le dire (j'ai peur de mal me faire comprendre), mais d'un point de vue pédagogique, je suis contre l'utilisation d'un thème gratuit puis le modifier.
Tu vas encore perdre du temps a comprendre la structure, alors qu'en faisant ton propres thèmes à toi tu pourrais le maitriser à 100%
Donc je te propose qu'on fasse ensemble un thème de A jusqu'à Z.
et si tu n'as pas d'attache particulière vis à vis de drupal 6.x,je te propose de faire ca via drupal 7.x. Une façon de migrer vers la nouvelle version :)

t'en dis quoi ?

Tu es un prince BenFarhat , je te l'ai déjà dis .

Mais tu me proposes là une situation gênante ... , car je n'ai hélas pas de budget pour ça .
Remarque , je pourrais te donner des cours de musique . Mais je suis loin de Paris ... Tu es où ?

J'aime bien bricoler , et l'informatique à la Drupal est , pour moi , une sorte de jeu de Lego ... Alors , petit à petit ... pourquoi ne pas monter un thème dès le début ... Avec quelques bons conseils ?
J'avoue que je n'y ai pas pensé parce que je ne saurais même pas par où commencer . Mais tu me donnes une idée là ...

Et je suis déjà sous Drupal 7 .

Par où commence-t-on un thème ?

Je n'ai pas de connaissances en informatique , BenFarhat .
J'ai juste un livre sur le XHTM et CSS , ainsi que sur le php et MySQL . Et sur le Drupal 7 .
Et avec les traducteurs google et autres il n'est plus impossible de comprendre de l'anglais .

Bonjour,

Je sais que ce post date de 2011, mais comme la solution n'a pas été apportée,
et que ce même post arrive en tête des recherches avec des mots clés comme:
"image de fond Drupal",
il doit intéresser de très nombreuse personne, c'est pourquoi, je me propose de donner une solution:

Le fichier a modifier est donc color.css et la portion de code:

body { background-color:#FFFFFF; }

a remplacer par:

body {
   background-color: #FFFFFF !important;
  background-image: url('/images/background.jpg') !important;
  background-repeat: repeat !important;
  background-attachment: fixed !important;
   background-position: left top !important;
  background-size: cover !important;
}

background-image: url('/images/background.jpg') !important;

Sur cette ligne vous indiquez le chemin pour trouver votre image, deux solutions:

Chemin complet (utilisé si l'image ce trouve sur un autre site que le votre):
url('http://mon.site.com/images/background.jpg')

Chemin relatif:
url('images/background.jpg')
ou absolu:
url('/images/background.jpg')

background-repeat: repeat !important;

Répète l'image.

background-attachment: fixed !important;

L'image reste fixe. remplacer fixed par scroll pour quelle défile en même temps que le contenu.

background-position: left top !important;

L'image est affiché à partir du bord gauche en haut, remplacer "left top" par "center" pour une image plus petite en largeur que la zone d'affichage.

background-size: cover !important;

Pour adapter l'image à la taille de l'écran.

Ajoutez "!important" à la fin de chaque ligne pour que votre image soit affichée en toute circonstance, dans le cas contraire d'autre fichier color.css pourrait prendre le pas sur celui que vous avez modifié.

Personnellement pour mes sites je modifie celui qui ce trouve dans "site/default/files/color/nom_du_thème_utilisé/color.css"

J'espère que ce post sera utile a beaucoup de monde.

A bientôt.

CWS