Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #534643

    I’m using the Color Section in combination with Special Header.
    For the color section, I’m using a image as background – parallax – center center.
    The color section gets an own id “sn-sk-bgt”

    See the details below

    [av_section min_height='custom' min_height_px='250px' padding='default' shadow='no-shadow' bottom_border='border-extra-arrow-down' id='' color='alternate_color' custom_bg='#2996cc' src='http://scheer-nederland.nl.185-21-241-26.kbitehosting.nl/wp-content/uploads/2015/10/SAP_bridge-1310.jpg' attachment='' attachment_size='' attach='parallax' position='center center' repeat='no-repeat' video='' video_ratio='16:9' overlay_opacity='0.5' overlay_color='#0070e8' overlay_pattern='' overlay_custom_pattern='' custom_class='sn-sk-bgt']
    [av_heading heading='Digitale Transformatie' tag='h1' style='blockquote modern-quote' size='' subheading_active='subheading_below' subheading_size='15' padding='5' color='meta-heading' custom_font='' custom_class='sn-sk-header']
    <lu>
    <li>Waarde creëren in digitale economie</li>
    <li>Van standaardisatie naar eenvoud en innovatie</li>
    <li>Realiseren van succesvolle "Customer Experience"</li>
    <li>Digitaliseren van processen</li>
    <li>Integrale samenwerking in de waarde keten</li>
    </lu>
    [/av_heading]
    [/av_section]

    Now I would like to position a partner-logo in the top right corner of this section.

    I have tried to use this css code:

    .sn-sk-bgt  .container{
    background-image: url("http://scheer-nederland.nl.185-21-241-26.kbitehosting.nl/wp-content/uploads/2015/11/SAP_Silver_Partner_Scheer-Nederland.png") right top;
    }

    However, I don’t see anything – When I remove the “right top”, I do see the image but repeated. When I use only no-repeat, there is also no image. With no options, I do get the repeated images.

    Looking to image repeating, it seems that the “.container” is also not the right div to address. As it seems to be used for the Special Header. However, I have tried all kind of other divs, but I’m not getting it done. I need to have this picture at the upmost right top of my screen – just beneath the breadcrumps.

    See the screen dump for the example https://screencloud.net/v/n4rV

    What is the trick to have the parallel background image and on top of that also the partner logo in the right top corner?

    #535550

    Hey stedia!

    I don’t see the background image at all when using your code. Can you provide us admin access, to have a deeper look into it please? post login details here as private reply.

    Best regards,
    Andy

    #535634

    If you tweak the mentioned line in the css – you will see the image

    #535637

    You have the remove the “right top” and then the image will be visible!

    #536280

    Hi,

    Please try the following CSS instead:

    #sn-sk-bgt  .container{
    background-image: url("http://scheer-nederland.nl.185-21-241-26.kbitehosting.nl/wp-content/uploads/2015/11/SAP_Silver_Partner_Scheer-Nederland.png") right top !important;
    }

    Regards,
    Rikard

    • This reply was modified 9 years ago by Rikard.
    #536400

    I have tried your CSS, but is does not solve the problem!

    See the first screenshot https://screencloud.net/v/16Zj – this is with the “right top !important;”. No change in behaviour – I have tried this also for different browsers.

    See the result on the second screenshot when I remove the “right top” from the css
    https://screencloud.net/v/dV2s

    Now you will see that the expected images is being displayed, however in a repeated way.
    But – looking to the repeating images – it seems to me that “container” is also not the right DIV to be selected, as I would like to see that the logo is displayed at the upmost right corner of my window.

    I’m using the parallax option within the Color Section.

    When I use the following CSS
    ‘/****** Logo in Special Header *********/
    .sn-sk-bgt .av-section-color-overlay-wrap{
    background-image: url(“http://scheer-nederland.nl.185-21-241-26.kbitehosting.nl/wp-content/uploads/2015/11/SAP_Silver_Partner_Scheer-Nederland.png&#8221;) !important;}’
    I do see the image indeed full with – but when I add the right top, it disappears. See https://screencloud.net/v/ch22

    What is the trick to avoid the repetition and to show the image only in the right-top corner?

    #536605

    Hey!

    can your provide us admin access please? then we can take a deeper look into it. Please post login details here as private reply.

    Cheers!
    Andy

    #536750

    Andy,

    See my private notes

    #536783

    Hey!

    unfortunately we are lots of different moderator, living in different countries and different time zones. We can’t provide you all our IPs. Let us know when we can access your backend and we’ll take a look.

    Regards,
    Andy

    #546400

    OK – I have created a test page.

    This is the css I have added to the style.css of my child-theme for Enfold

    /****** Logo in Special Header *********/
    .sn-sk-bgt-test  .container{
    	background-image: url("http://scheer-nederland.nl/wp-content/uploads/2015/11/SAP_Silver_Partner_Scheer-Nederland.png");
    }

    Now you will see that is picture is repeating. When I add the option “right no-repeat” after the URL, I don’t see anything anymore.

    What I would like to achieve is that this picture is only displayed in the upmost right corner of the full-width Color Section.
    This is on top of the used background-image that is used in the color section.
    I have now used the container section. But this is not the right one

    The background Image in my Color Section is having the following settings:

    [av_section min_height='custom' min_height_px='250px' padding='default' shadow='no-shadow' bottom_border='border-extra-arrow-down' id='' color='alternate_color' custom_bg='#2996cc' src='http://scheer-nederland.nl.185-21-241-26.kbitehosting.nl/wp-content/uploads/2015/10/SAP_bridge-1310.jpg' attachment='' attachment_size='' attach='parallax' position='center center' repeat='no-repeat' video='' video_ratio='16:9' overlay_opacity='0.5' overlay_color='#0070e8' overlay_pattern='{{AVIA_BASE_URL}}images/background-images/grid-big-dark.png' overlay_custom_pattern='' custom_class='sn-sk-bgt-test']
    [av_heading heading='Digitale Transformatie' tag='h1' style='blockquote modern-quote' size='' subheading_active='subheading_below' subheading_size='15' padding='5' color='meta-heading' custom_font='' custom_class='sn-sk-header']
    <ul>
    	<li>Waarde creëren in digitale economie</li>
    	<li>Van standaardisatie naar eenvoud en innovatie</li>
    	<li>Realiseren van succesvolle "Customer Experience"</li>
    	<li>Digitaliseren van processen</li>
    	<li>Integrale samenwerking in de waardeketen</li>
    </ul>
    [/av_heading]
    [/av_section]
    

    Settings for the background image are:
    – Parallel
    – Center Center
    – No Repeat

    It sounds to me that this is more a css issue where the right section/div needs to be addressed to make this happen.

    I hope you are still able to support me with this.

    #546660

    Hi!

    use this code:

    .sn-sk-bgt-test .container {
    background-repeat: no-repeat;
    background-position: 526px 10px;
    }
    

    and adjust as needed.

    Best regards,
    Andy

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