图像不适合屏幕

Question

在我的ruby on rails web应用程序中，我有一个由两种颜色组成的图像，第一部分是黑色，第二部分是蓝色。当我在背景上设置此图像时，图像重复：

body {
    background:url("bg.png");
}

但是当我在下面使用时，图像的重复是删除：

body {
    background:url("bg.png") 0 0 repeat-x;
}

但垂直不适合屏幕，

它涵盖了屏幕的2/3部分。并且黑色部分是合适的但是蓝色部分没有覆盖剩余的屏幕，我想只增加图像的蓝色部分而不是黑色，是否可能。

请建议我，等待你的回复。 感谢。

Answer 1

可以将CSS3渐变与背景图像一起使用。有关详细信息，请参阅此Q&A。

创建一个仅为黑色部分的背景图像，然后使用CSS渐变创建蓝色部分。

Answer 2

不同元素

使用背景图片是一门艺术

我建议使用两个元素 - “nav”元素＆amp;然后将body的背景设置为蓝色渐变。您可以使用background-size: cover属性来完成此工作：

http://jsfiddle.net/wM2B7/

#app/assets/stylesheets/application.css.scss
body {
    background: url("gradient.png");
    background-size: cover;
}

nav {
    height: 45px;
    display: block;
    background: url("black.png") 0 0 repeat-x;
}

这将允许您给出具有单个背景图像的错觉，同时保持具有多个元素的灵活性（IE body样式将对身体起作用，nav样式将起作用对于nav）