Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #1221585

    Hi! I wanted to create a sort arrow on the background and created it with an image on the background. The image is white and grey, same colors as the background of the site but the white color of the image looks a little bit blue on the site. It’s not totally white. Do you have any idea why that is? And how I can fix it?

    Maybe it’s a little bit unprofessional way of doing it with a background image but didnt know how to do it otherwise :)

    Thanks a lot!

    #1221591

    can we see the site please.
    or upload that image on an image hoster like: https://postimages.org/
    I have a hunch

    #1221592

    https://cutt.ly/Zy7Zeqp

    • This reply was modified 4 years, 6 months ago by jannnnnneke.
    #1221602

    on all my browsers here on OS X Catalina – ( Chrome, Firefox Developer, Safari ) i do not have that blue cast.
    The overlay color is a pure gray. What do you want to accomplish with the overlay color?

    #1221603

    I’m talking about this arrow: https://ibb.co/Zc0Xdgj

    When I look from a little bit under your screen I see the blue color very good. You doesnt see that?

    What do you mean with overlay? I don’t have an overlay color over this content section. Only over the header image. Thats oke!

    #1221604

    This is the image I’m using on background: https://cutt.ly/Vy7MfpO

    #1221606

    ok – now i see – and that was my suggestion – this image is a cmyk jpg !
    Rendering of cmyk images with browsers tend to have a cast.

    by the way: i would take a png file and let the top area transparent – then you can even have on the previous section a background-image.

    • This reply was modified 4 years, 6 months ago by Guenni007.
    #1221609

    Ah oke! And how should I save the image than? Now used indesign to create and save the image!

    #1221614

    Oh yes, that’s better! I tried that before but than it wasnt working. Dont know why!

    Only grey is a little bit different now, but I will try to fix that!

    Is your image an CMYK image or can I better change the settings or save it another way?

    #1221629

    the image above is a rgb image.
    Are you using a child-theme ?

    #1221634

    Yes, always!

    #1221640

    – see this site here: https://webers-testseite.de/cynthia/
    i make a svg image that is near to your image divider.

    This code in child-theme functions.php:

    function insert_dividers(){
    ?>
    <script>
    (function($){
    
    // just give a custom-class to the color-section or the slider : divider
    // and a custom class for top or bottom position: top / bottom
    // so there is in that input field f.e.:  "divider bottom"
      $('.avia-section.divider.top').prepend('<svg version="1.1" class="top" title="big_arrow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="200px" viewBox="0 0 1500 200" preserveAspectRatio="none"><path class="jan" d="M766.69,192.84c-10.94,2.88-22.43,2.88-33.37,0L0,0h0v200h1500V0L766.69,192.84z" fill="#EEEEEE"/></svg>');
      $('.avia-section.divider.bottom').append('<svg version="1.1" class="bottom" title="big_arrow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="200px" viewBox="0 0 1500 200" preserveAspectRatio="none"><path class="jan" d="M766.69,192.84c-10.94,2.88-22.43,2.88-33.37,0L0,0h0v200h1500V0L766.69,192.84z" fill="#EEEEEE"/></svg>');
      $('.divider.top .avia-slideshow .avia-slideshow-inner').after('<svg version="1.1" class="top" title="big_arrow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="200px" viewBox="0 0 1500 200" preserveAspectRatio="none"><path class="jan" d="M766.69,192.84c-10.94,2.88-22.43,2.88-33.37,0L0,0h0v200h1500V0L766.69,192.84z" fill="#EEEEEE"/></svg>');
      $('.divider.bottom .avia-slideshow').append('<svg version="1.1" class="bottom" title="big_arrow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="200px" viewBox="0 0 1500 200" preserveAspectRatio="none"><path class="jan" d="M766.69,192.84c-10.94,2.88-22.43,2.88-33.37,0L0,0h0v200h1500V0L766.69,192.84z" fill="#EEEEEE"/></svg>');
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'insert_dividers');

    this to quick css:

    .avia-section.divider {
        position: relative !important;
    }
    
    .avia-section.divider .container a {
        z-index: 10;
    }
    
    .avia-section.divider svg {
        position: absolute;
        z-index: 5;
        width: 100vw;
    }
    
    .avia-section.divider svg.top {
        top: -2px !important;
        height: 150px;
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg)
    }
    
    .avia-section.divider svg.bottom {
        bottom: -2px !important;
        height: 100px;
    }

    Now – how to insert the dividers:
    you only have to give to a color-section – or a slider the class f.e. : divider bottom
    then the divider will be inserted as inline svg. On that you can influence the fill color:

    .avia-section.divider svg.top path {
      fill: #fff;
    }
    .avia-section.divider svg.bottom path {
      fill: #fff;
    }

    e.g. on that example page you see the section with the button “get in touch”
    the following color-section has a different background-color!
    just solve this by:

    #av_section_3 svg.bottom path {
        fill: #c5e3ea;
    }

    or on top i gave to that color-section the custom-classes: divider top bottom
    so there are two dividers in the same section

    #1223305

    if you use that png above from my post : allthough it is set to #eeeeee it is rendered as : #ececec
    so if you do not like to see a difference you can change the color-section background to that #ececec

    Next: you had to replace every background-image on your page. You did it only for the first one.

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