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!