+1-888-365-2779
Try Now
More in this section

Forums / Designing & Styling / Header Image width 100%

Header Image width 100%

6 posts, 2 answered
  1. Patrick
    Patrick avatar
    14 posts
    Registered:
    02 Jul 2013
    08 Jul 2013
    Link to this post
    I am looking for a way to put an image, using the builtin Content -> Image.

    Once I have my image on page I have the right CSS to place it where I want 
    but I cannot make it extend 100% of the page (must extend depends on browser size)

    I have width: 100%; in my CSS but the width option in SF only lets you choose width in pixels.

    Help please! Thanks
  2. Jonathan
    Jonathan avatar
    119 posts
    Registered:
    19 Dec 2012
    08 Jul 2013 in reply to Patrick
    Link to this post
    Make sure you have selected "Original Image Size" (see attached), add your class (see attached).  Now id you are setting in CSS width 100% the image will only fill the width of it's parent container <div>.  So you will need to sets its parent container to be 100% as well or it will never fill the whole page/screen.  If you have code examples you can attach I can be of more assistance.
  3. Patrick
    Patrick avatar
    14 posts
    Registered:
    02 Jul 2013
    08 Jul 2013 in reply to Jonathan
    Link to this post
    These are the opening divs before the picture (the Content place holder is where the pic is going)

    <div class="content-wrapper">
           <div class="topPic">
              <asp:ContentPlaceHolder ID="topPicHolder" runat="server"/>


    Now the classes:

    .content-wrapper {
        margin: 0 auto;
        width:100%;
        height: auto;
        min-height:100%;
    }

    .topPic {
        clear: both;
        width: 100%;
        height: auto;
        text-decoration: none;
    }

    .dunne {
        width:100%;
        position:absolute;
        z-index:-5000;
    }



  4. Jonathan
    Jonathan avatar
    119 posts
    Registered:
    19 Dec 2012
    08 Jul 2013 in reply to Patrick
    Link to this post
    Interesting. Using Dev tools in Chrome or which ever browser you fancy can you confirm that .content-wrapper and .topPic are spanning the full width, also when you inspect the elements in dev tools you should find that it places .dunne on the <div> not the <img>.  So you probably need .dunne img {width:100%;} also
    Answered
  5. Patrick
    Patrick avatar
    14 posts
    Registered:
    02 Jul 2013
    08 Jul 2013 in reply to Jonathan
    Link to this post
    Ahh yes! My hero!

    .dunne img {
    width: 100%;


    This fixes it, it was not applying to the image only the div! thank you!
    Answered
  6. Jonathan
    Jonathan avatar
    119 posts
    Registered:
    19 Dec 2012
    08 Jul 2013 in reply to Patrick
    Link to this post
    My pleasure, make sure to mark as answered!
6 posts, 2 answered