Header Image width 100%

Posted by Community Admin on 05-Aug-2018 17:02

Header Image width 100%

All Replies

Posted by Community Admin on 08-Jul-2013 00:00

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

Posted by Community Admin on 08-Jul-2013 00:00

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.

Posted by Community Admin on 08-Jul-2013 00:00

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;



Posted by Community Admin on 08-Jul-2013 00:00

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

Posted by Community Admin on 08-Jul-2013 00:00

Ahh yes! My hero!

.dunne img
width: 100%;
 

This fixes it, it was not applying to the image only the div! thank you!

Posted by Community Admin on 08-Jul-2013 00:00

My pleasure, make sure to mark as answered!

This thread is closed