Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • January 30, 2015 at 10:44 pm #388574
    wordmax

    Hi,
    how can I realize at my stretched layout, that a transparent horizontal section (300px high) is sliding over a fullscreen background image like here on this page in the area under the slider with the tree
    http://goo.gl/otrdcx
    The other areas of the page shouldn´t be transparent.

    Thank you very much for your help!

    Regards
    Wordmax

    • This topic was modified 9 years, 10 months ago by wordmax.
    January 30, 2015 at 11:07 pm #388589
    begrafiks

    Hi wordmax ;
    I can’t see the link,
    but if I don’t misunderstood …. you should use Advanced Layout Builder (at the top while creating your page) Color section > Background section (and add an image.

    January 30, 2015 at 11:12 pm #388592
    wordmax

    Hi begrafiks,
    no, that´s not what I mean. The transparency should slide over the backgroundimage. The image itself is not moving.
    Can you see this link now? http://goo.gl/otrdcx

    • This reply was modified 9 years, 10 months ago by wordmax.
    January 30, 2015 at 11:20 pm #388597
    begrafiks

    Hi wordmax;
    I would try ;
    to add a background image to the page (by page-id-XXX)
    and insert a transparent image in a color section (to have the transparent image rolling over the background image)

    • This reply was modified 9 years, 10 months ago by begrafiks.
    January 31, 2015 at 12:11 am #388633
    wordmax

    Hi begrafiks
    that is strange because in my browser the link works.
    I tried your workaround but the transparent image shows only white color in the browser not the background image.

    • This reply was modified 9 years, 10 months ago by wordmax.
    January 31, 2015 at 11:51 am #388726
    begrafiks

    Hi wordmax ;
    “the transparent image shows only white color in the browser not the background image” = there would be a background color of the color section, you can add an id to your color section and try to change it.

    I would try :
    1 – color section ; my-image in it,
    2- color section ; my-image (reduced opacity) in it,
    3- color section ; my-image in it,

    and the last but not least “your-site” = 403 page

    • This reply was modified 9 years, 10 months ago by begrafiks.
    January 31, 2015 at 5:37 pm #388781
    wordmax

    Hi begrafiks,
    I will try this and give feedback, thank you very much for your help.Thank you!

    February 3, 2015 at 11:57 am #389999
    wordmax

    Hi begrafiks,
    after a long night I found that workaround. Maybe another user has the same question in the future so I
    write the steps down. Hope that helps!:

    1.Put this to style.css or quick.css
    #twelve { background-color: transparent !important; }
    #main, .html_stretched #wrap_all {background-color: transparent;}
    2. Insert a colorsection at the requested position on your page and put “twelve” in the “section id”-field there
    3. Install plugin “wp backgrounds lite”, go to the page with the colorsection, go to the bottom of the page, press “select background image” and select one. Done!

    Regards
    wordmax

    February 3, 2015 at 2:17 pm #390072
    Yigit

    Hey!

    Thank you @begrafiks for your help :)

    @wordmax     glad @begrafiks could help! And thank you for sharing your solution :) Let us know if you have any other questions or issues

    Cheers!
    Yigit

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Transparent horizontal section is sliding over fullscreen background image’ is closed to new replies.