2011-08-01 1 views
0

J'ai essayé différentes options et aussi celles affichées sur stackoverflow. Mais rien ne semble fonctionner. J'ai le fichier logo.png dans/public/images et un fichier custom.css dans les feuilles de style.ROR: Plein écran Image d'arrière-plan

Je veux

l'arrière-plan de chaque page à logo.png (plein écran) J'ai essayé, après la recherche d'un lot. Mais je n'ai rien. L'arrière-plan est juste vide.

S'il vous plaît aider

body{ 
background: url('../images/logo.png') repeat-x ; 
text-align:center; 
color:#fff; 
} 
+0

Pouvez-vous voir l'image si vous venez d'y naviguer via le navigateur? Peut-être que c'est un problème de routes ou d'autorisations. – Mischa

+0

Essayez 'url ('/ images/logo.png')'. – RocketR

Répondre

0

Vous ne voulez certainement pas utiliser répétition x Pour illustrer pourquoi, utilisez le lien suivant http://www.w3schools.com/css/tryit.asp?filename=trycss_background-image et collez le code ci-dessous et voir ce qui se passe, puis retirez la répétition x et voir les résultats

<html> 
<head> 
<style type="text/css"> 
body { 
    color: white; 
    background:url('paper.gif') repeat-x; 
} 
</style> 
</head> 

<body> 
<h1>Hellos World!</h1> 
</body> 

</html> 

Si votre image ne s'affiche pas après la suppression de repeat-x, il s'agira très probablement d'un problème de chemin (comme d'autres l'ont déjà signalé) ou d'une mauvaise image. La seule autre chose est s'il y a d'autres classes/divs définies dans votre CSS qui surchargent la propriété d'arrière-plan que vous avez définie dans le corps du texte. D'autres vous ont suggéré d'utiliser firebug. Je suis entièrement d'accord. Firebug est assez essentiel lorsqu'il s'agit de problèmes HTML et CSS. Firebug est disponible pour les navigateurs Chrome et Firefox (Firefox en tant que plugin, Chrome par défaut) mais je ne suis pas certain des autres navigateurs.

0

Au lieu de mettre repeat-xrepeat. Sinon, vérifiez si le chemin de votre image est correct.

+0

Ça ne marche pas non plus. Le fichier image se trouve dans/public/images/et le fichier css dans public/stylesheets /. Donc je pense que le chemin est bon. – Wasi

+0

@Wasi oui cela devrait être le bon chemin –

+0

Votre CSS est-il propre? Est-ce le seul endroit où vous changez d'arrière-plan. Vérifiez également s'il n'y a pas de code HTML codé en HTML. Ou mieux encore, vérifiez la valeur de firebug. –

0

Problème de chemin? ^^

Pouvez-vous voir votre image si vous venez de naviguer vers elle? Sinon, essayez d'utiliser firebug pour voir quel est le problème et pour le résoudre facilement.

image de fond plein écran:

J'ai trouvé un article intéressant sur des tours css-peut être utile, l'auteur propose des solutions.

0

Un plugin JQuery que j'ai utilisé pour les images d'arrière-plan en plein écran s'appelle bgStetcher. Vous pouvez l'utiliser pour étirer les images d'arrière-plan pour remplir l'écran. Une telle chose ne peut pas être faite en CSS.