Home>Support>Make image banners full width

Make image banners full width

By Natacha, 9 years ago. Last reply by Magus, 9 years ago.

How can I stretch my custom image banners so there’s no white (gray) space on either side or top? I want the image to touch the menu bar… I have an image like this on all my pages.

Thanks

URL: http://thresholdcommunications.com/wordpress/sample-page/

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 3 months ago Natacha

    Sorry here is the correct URL: http://thresholdcommunications.com/wordpress/about/

  2. 9 years, 3 months ago fnanfne

    Hi Natacha,

    Go to:

    Appearance –> Theme Settings –> Layout

    Then under “Layout Bound”, select “Full Width” in the dropdown menu.

  3. 9 years, 3 months ago fnanfne

    Oh no hold on, I think I misunderstood you!

    Doing what I suggested will make the whole theme stretch. Not sure about the image, what resolution did you create the image as, 1080 X 420 ?

  4. 9 years, 3 months ago Natacha

    Yeah I am not trying to make the whole theme stretch but just the images I put in below menu on each page. I am trying to make the image have no white space above it or no space on either side.

    The images are 1080 wide, yes…

  5. 9 years, 3 months ago Magus
    Hi, I Work Here

    Hi Natacha

    Please navigate to Appearance->Custom CSS and add the following to the editor

    #main {
    padding-top: 0px;
}

article.post .entry-header, article.page .entry-header {
    margin-bottom: 0px;
}

.entry-content img:first-of-type {
    margin-left: -35px;
    margin-right: -35px;
    position: absolute;
}

    Let us know how you get on

    Magus

  6. 9 years, 3 months ago Natacha

    Hi thank you for the code. It worked (sort of). Images are now covering content below. Any adjustment I need to make?

    http://thresholdcommunications.com/wordpress/contact-us/

  7. 9 years, 3 months ago Natacha

    Also, inputting this custom CSS made me lose my “Clients” slider at the bottom of homepage:

    http://thresholdcommunications.com/wordpress/

  8. 9 years, 3 months ago Andrew Misplon
    Hi, I Work Here

    Hi Natacha

    A solution without CSS would be to use Meta Slider. Add each banner as a single slide slider. On each page you can add the slider using the Page Slider metabox in the right column. That’ll place the image exactly where you want it.

  9. 9 years, 3 months ago Magus
    Hi, I Work Here

    Hi Natacha

    My apologies, I was targeting the wrong element and did not notice the text had moved beneath the image. Please try this instead

    .home #main (
    padding-top: 35px;
}

#main {
    padding-top: 0px;
}

article.post .entry-header, article.page .entry-header {
    margin-bottom: 0px;
}

.entry-content p:first-of-type {
    margin-left: -35px;
    margin-right: -35px;
    position: absolute;
}

    Magus

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More