images not scaling with CSS

Question

i have the following code bellow and the images is currently not scaling to fit. it only changes if if rezise it in for example photoshop, should it not scale with the 100% setting?

HTML

<!-- Section: intro -->
    <section id="intro" class="intro">
        <div class="slogan">
            <h2>TITLE <span class="text_color">2015</span> </h2>
            <h4>TITLE 2</h4>
        </div>
        <div class="page-scroll">
            <a href="#about" class="btn btn-circle">
                <i class="fa fa-angle-double-down animated"></i>
            </a>
        </div>
    </section>
    <!-- /Section: intro -->

CSS

.intro {
    width:100%;
    position:relative;
    background: url(../img/bg1.jpg) no-repeat top center;
}

Answer 1

I believe the styling you want is

background-size: cover

Here is a good tutorial: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images

Or if the image must be absolutely scaled so it always shows the whole image:

background-size: 100% 100%

Answer 2

You can use something like this;

.intro {
   width:100%;

    position:relative;

    background-image: url(../img/bg1.jpg);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

Or use a keyword for background-size which will behave differently. (http://www.w3schools.com/cssref/css3_pr_background-size.asp)

Just try and choose whatever works for your needs.

Best,