Photoshop Question posted in
The official user guide can be found here.

images not scaling with CSS – Photoshop

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

2

Answers


  1. 0

    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%
    Login or Signup to reply.
  2. 0

    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,

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search