Size the background color using

Question

I'm trying to scale the background color. I'm having the nav bar and I want the color to be from the nav bar to the bottom.

I've tried using:

background-size: 80px 60px;

Which doesn't work because it is still filling the page for 100%. Also for everyone to know i'm using bootstrap.

This is the css from bootstrap:

body {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
    background-color: #F5F5F5;
}

These are my css rules which override the bootstrap css files.

body {
    background-size: 80px 60px;
    background-repeat: no-repeat;
}

The nav bar is allways has a margin of 15% left and right so the width that the bg color has to be is 70%. The top margin is 0 because that it is following the image at the top.

If i've forgot to give information my apalogies and I will add the needed information asap.

Answer 1

you cannot size a background-color, but you can give a specific size to a gradient which is treated as a background-image.

here's what you could do: http://jsfiddle.net/JkhCs/

body {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
    background-color:transparent;
    background-image: -webkit-linear-gradient(red, red);
    background-image: linear-gradient(red, red);
    background-size:80px 80px;
    background-repeat:no-repeat;
}

Answer 2

Do you know backgroud-size:cover and backgroud-size:contain?

Check it out at css3.info or W3Schools, it’s fantabulous.