Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #817690

    Am trying to place a logo across the full screen slider pages for a new website and the image does not show at normal resolution but tries to completely fill the screen.

    The image I am using is

    but when the code Vtech - Vehicle safety systems is entered into the caption title it is stretched as per the screen shot below.

    slides 1 and 3 have logos uploaded for viewing online

    Login details shown in box below


    Hey madmanbean,

    Why are you putting an image in captions? Captions are supposed to be text!
    If you need you logo on the slider, use Layer Slider, it has functionality for layers on the slide.

    Best regards,


    Layer slider is a way too complicated option that my client would never be able to edit or change. Also there are features such as the scroll down arrow and also the left right navigation arrows plus the ability to add and edit subtitles that do not seem to be possible with the slider.

    have managed to add the logo centrally as this example below which has a nice effect

    client has seen this page and wants the same effect but using his logo..


    Hi madmanbean,

    Well, you could use some almost transparent background to make the logo stand out a bit, but the images are very high contrast.
      background: rgba(255, 255, 255, 0.4) !important;

    Those guys have a lighter logo and use white text. Your logo will be lost on dark images.

    Best regards,



    Where do you stack the code?


    well you can use your full-screen slider aswell and add your logo via jQuery function.

    Here on my testpage i have given the slider the custom-class: place-logo

    then i put into functions.php of my child-theme:


    function add_logo_to_slider() { 
    	$('.place-logo .slideshow_caption').before('<img class="sliderlogo" src="" alt="Logo on Slider" />');
    add_action('wp_footer', 'add_logo_to_slider');

    and make a setup for your added image for each slide number like:

    /* rule for all slides in the slider */
    .sliderlogo {
    position: relative !important;
    width: 40% !important;
    top: 35%;
    transform: translateY(-50%);
    -webkit-filter: drop-shadow(2px 2px 3px #ffffff);
    filter: drop-shadow(2px 2px 3px #ffffff);
    /* if you like to have semitransparent background with padding for slide 1 */
    .slide-1 .sliderlogo {
        background-color: rgba(255,255,255,0.2);
        padding: 40px;
    /* if you like to shift in x direction for slide 2 */
    .slide-2 .sliderlogo {
    	margin-left: 10% !important;

    :lol by the way – first i thought this might be a nice gimmick – but it is to complicated to make it real look beautiful:


    if you are interested in this solution – it might be possible in a similar way:



    @guenni007 Thank you very much! :)

    Best regards,

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.