Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • August 24, 2016 at 11:29 am #676898
    Raphep

    Hi. I have loaded a picture for the background of my header. The bottom half of the picture is transparent under the wavy line (see site). However, this area just appears grey – not transparent. I want to be able to see content up to the wavy line, not the edge of the picture. Can this be done?
    Thanks – Raphe

    August 27, 2016 at 3:11 am #678384
    Josue

    Hey Raphep,

    I guess you’re referring to the footer, try this code:

    div#main,
.footer_color {
    background-color: transparent;
}

    Best regards,
    Josue

    August 28, 2016 at 5:26 am #678556
    Raphep

    Thanks Josue – That just makes it go grey. I need it to show through to the page background image.

    August 28, 2016 at 7:55 am #678587
    Vinay

    Hi,

    It’s not clear what you are trying to achieve Would you mind posting us a screenshot/mockup of what you would like to achieve? You can upload the screenshot to imgur.com or dropbox and share the link here :)

    Best regards,
    Vinay

    August 29, 2016 at 9:27 am #678778
    Raphep

    Hi Vinay
    No need to upload a screenshot. You can see on the page link in the footer that I’ve nearly achieved what I wanted. However, I just need to remove the padding from the top picture so that it reaches the sides. Then I just need to repeat it for the header – provided I can get rid of the grey line, which won’t go no matter what I do. Thanks for your help.

    August 30, 2016 at 8:44 pm #679678
    Josue

    Hi,

    Place that image inside a Color Section with a custom ID of “pre_footer”, then add this to Quick CSS:

    #pre_footer .container {
    padding: 0;
}

    Best regards,
    Josue

    August 31, 2016 at 3:06 am #679767
    Raphep

    Thanks Josue almost there. If you look at the page the width is now correct, but the Color Section uses the background images, rather than allowing the transparent parts of the image to show the actual main page background. I’ve tried adding to your css things like background-color:transparent; but no luck. Regards – Raphe

    August 31, 2016 at 7:09 am #679831
    Josue

    Hi,

    It’s because the footer graphic lives in its own block, you need to move it upwards:

    #av_section_1 {
    background: transparent;
    margin-top: -62px;

}

    Best regards,
    Josue

    August 31, 2016 at 8:05 am #679856
    Raphep

    Brilliant – Thanks for all your help. V impressed.

    Raphe

    August 31, 2016 at 8:26 am #679861
    Josue

    You are welcome, one thing though, you should use unique IDs for customized sections because the code can affect sections in other Pages.

    Regards,
    Josue

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.