image not fit the screen

Question

In my ruby on rails web application, I have an Image that consists of two colours the first portion is black and the second portion is blue. When I set this image on the background, the image is repeating:

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

but when I use below the repeatation of the image is remove:

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

but vertically its not fit to the screen,

enter image description here

it covers the 2/3rd portion of the screen. and the black portion is fit but the blue portion not cover the remaining screen and I want to increase only the blue portion of the image not black, is it possible.

Kindly suggest me, waiting for your reply. Thanks.

is there any way to repeat on the blue portion of the image. — user88, Jun 19 '14 at 06:03
make a new image in which your blue portion is way too large so that it goes to the end of the page. There is no other way you can handle this — Pushpak Patel, Jun 19 '14 at 06:15
Or just use two backgrounds, for two different elements, especially if the black will be a background for the header. — Amadan, Jun 19 '14 at 06:50

score 0 · Answer 1 · edited May 23 '17 at 12:13

0

It's possible to use CSS3 gradient together with a background image. See this Q&A for details.

Create a background image that is just the black part and then use the CSS gradient to create the blue part.

edited May 23 '17 at 12:13

Community

1
1

answered Jun 19 '14 at 06:40

RaneWrites

268
1
2
12

score 0 · Accepted Answer · answered Jun 19 '14 at 07:11

Different Elements

Using background images is an art

I would recommend using two elements - a "nav" element & then set the background of the body to the blue gradient. You can use the background-size: cover property to make this 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 will allow you to give the illusion of having a single background image, whilst maintaining the flexibility of having multiple elements (I.E the body styling will act for the body, the nav styling will act for the nav)

image not fit the screen

2 Answers2