ROR: Full Screen Background Image_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-03-25 12:26 出处：网络

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.