Header Image width 100% - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

Header Image width 100%

  • Header Image width 100%
  • 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
  • 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.

  • 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;



  • 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
  • Ahh yes! My hero!

    .dunne img
    width: 100%;
     

    This fixes it, it was not applying to the image only the div! thank you!
  • My pleasure, make sure to mark as answered!