css - image not fit the screen -

css - image not fit the screen -

in ruby on rails web application, have image consists of 2 colours first portion black , sec portion blue. when set image on background, image repeating:

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

but when utilize below repeatation of image remove:

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

but vertically not fit screen,

it covers 2/3rd portion of screen. , black portion fit bluish portion not cover remaining screen , want increment bluish portion of image not black, possible.

kindly suggest me, waiting reply. thanks.

different elements

using background images art

i recommend using 2 elements - "nav" element & set background of body bluish gradient. can utilize background-size: cover property create work:

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; }

this allow give illusion of having single background image, whilst maintaining flexibility of having multiple elements (i.e body styling deed body, nav styling deed nav)

css ruby-on-rails