ROR: Full Screen Background Image
I have tried different options and also the ones posted on stackoverflow. But nothing seems to work. I have logo.png file in /public/images and a custom.css file in stylesheet开发者_JAVA百科s.
I want the background of every page to be logo.png (full screen)
I tried the following after searching a lot. But i got nothing. The background is just blank.
Please help
body{
background: url('../images/logo.png') repeat-x ;
text-align:center;
color:#fff;
}
You definitely do NOT want to use repeat-x To illustrate why, Use the following link http://www.w3schools.com/css/tryit.asp?filename=trycss_background-image and paste the code below and see what happens, then remove the repeat-x and see the results
<html>
<head>
<style type="text/css">
body {
color: white;
background:url('paper.gif') repeat-x;
}
</style>
</head>
<body>
<h1>Hellos World!</h1>
</body>
</html>
If your image is not displaying after remove repeat-x, it will most likely be a path issue (as others have already pointed) out or a bad image.
The only other thing is if there are other classes/divs defined in your css that override the background property that you have set in the body text. Others have suggested you use firebug. I have to whole heartedly agree. Firebug is pretty essential when dealing with HTML and CSS issues.
Firebug is available to Chrome and Firefox browsers (Firefox as a plugin, Chrome by default) but I'm unsure of other browsers.
Instead of repeat-x put repeat.
Other than that check if the path to your image is correct.
Path problem ? ^^
Can you see your image if you just navigate to it ? If not try to use firebug to see what is the problem and to solve it easily.
Full Screen background image :
I found an interesting article on css-tricks may be usefull, the author offers some solutions.
There's a JQuery plugin I've used for full screen background images, and it's called bgStetcher. You can use it to stretch background images to fill the screen. Such a thing cannot be done in CSS.
加载中,请稍侯......
精彩评论