-
AuthorPosts
-
June 11, 2020 at 9:50 am #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!
June 11, 2020 at 10:05 am #1221591can we see the site please.
or upload that image on an image hoster like: https://postimages.org/
I have a hunchJune 11, 2020 at 10:07 am #1221592- This reply was modified 4 years, 6 months ago by jannnnnneke.
June 11, 2020 at 10:32 am #1221602on 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?June 11, 2020 at 10:37 am #1221603I’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!
June 11, 2020 at 10:38 am #1221604This is the image I’m using on background: https://cutt.ly/Vy7MfpO
June 11, 2020 at 10:42 am #1221606ok – 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.
June 11, 2020 at 10:43 am #1221609Ah oke! And how should I save the image than? Now used indesign to create and save the image!
June 11, 2020 at 10:58 am #1221614Oh 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?
June 11, 2020 at 11:37 am #1221629the image above is a rgb image.
Are you using a child-theme ?June 11, 2020 at 11:52 am #1221634Yes, always!
June 11, 2020 at 12:12 pm #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 sectionJune 17, 2020 at 10:47 am #1223305if 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 #ecececNext: you had to replace every background-image on your page. You did it only for the first one.
-
AuthorPosts
- You must be logged in to reply to this topic.