Image instead of Slider Text on Header

I’ve looked through many threads, mainly the ones below, but I cannot find a solution. I’m trying to have my logo image instead of the Title text on the header page.

You guys are great, thank you for all the work you do for everyone.
Site: vayabaja.com
Image URL: http://vayabaja.com/wp-content/uploads/2017/06/VayaBaja-Logo-V2_Color.png

Thread

Code I tried (I also tried playing with background side):
.text-slider .maintitle{
padding-top: 150px;
background-image: url(http://vayabaja.com/wp-content/uploads/2017/06/VayaBaja-Logo-V2_Color.png);
background-repeat: no-repeat;
background-size: 10%;
background-position: top center;
}

Nothing appears on my site. Your help is greatly appreciated.

Thank you

Hello there,

Please try this code:


.text-slider .maintitle {
  width: 100%;
  padding-top: 150px;
  background-image: url(http://vayabaja.com/wp-content/uploads/2017/06/VayaBaja-Logo-V2_Color.png);
  background-repeat: no-repeat;
  background-size: 10%;
  background-position: top center;  
}

Regards,
Kharis

I am developing a site that has two slides, and I would like a different image in each slide.

This CSS code (above) works great to include the image on all slides. But is it possible to have a different image for each slide?

Thanks!

Ron

Hello Ron,

You can use this CSS code:


.header-slider .slide-item .text-slider .maintitle {
  width: 100%;
  padding-top: 150px;
  background-repeat: no-repeat;
  background-size: 10%;
  background-position: top center;
}

/* Slide 1 */
.header-slider .slide-item:nth-of-type(1) .text-slider .maintitle {
  background-image: url("http://yoursite.com/path/to/image1.png");
}

/* Slide 2 */
.header-slider .slide-item:nth-of-type(2) .text-slider .maintitle {
  background-image: url("http://yoursite.com/path/to/image2.png");
}

/* Slide 3 */
.header-slider .slide-item:nth-of-type(3) .text-slider .maintitle {
  background-image: url("http://yoursite.com/path/to/image3.png");
}

/* Slide 4 */
.header-slider .slide-item:nth-of-type(4) .text-slider .maintitle {
  background-image: url("http://yoursite.com/path/to/image4.png");
}

/* Slide 5 */
.header-slider .slide-item:nth-of-type(5) .text-slider .maintitle {
  background-image: url("http://yoursite.com/path/to/image5.png");
}

Regards,
Kharis

Hi, Im using the same code (additional css area in wordpress) to edit only a second slide on Sidney theme.
I have added a logo instead text and that works fine. Nevertheless I cant resize the line below the logo, it neither works to make it transparent. Im also trying to make this responsive for mobile version.

Can you please help me to resize the line? if this is not possible can you let me know how to delete it and add a separate item as a line that isnt linked to the background?

this is my code:

    /* LOGO Slide 2 DESKTOP */
    .header-slider .slide-item:nth-of-type(2) .text-slider .maintitle {
      width: 100%; 
      background-repeat: no-repeat;
      background-position: center;
      background-size: 30%;
      padding-top: 10%;
      padding-bottom: 0px;
      background-image: url("https://www.website.com/path/Logo.png");
    }
     /* Logo Slide 2  MOBILE VERSION */	
     @media only screen and (max-width:767px)
    {
    	/* Slide 2 */
    .header-slider .slide-item:nth-of-type(2) .text-slider .maintitle {
    	width: 100%;
      background-repeat: no-repeat;
      background-position: top center;
    	background-size: 40%;
      padding-top: 10%;
    	padding-bottom: 0px;
      background-image: url("https://www.website.com/path/Logo.png");
    }
    }

Thank you very much!

Hello there,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    .header-slider .slide-item:nth-of-type(2) .text-slider .maintitle:after {
      display: none;
    }

Regards,
Kharis

Hi Kharis,

Thank you very much for your quick response. After removing the line, is there a way to add another one independent from the background and add a customized length?

The idea of adding another independent line is to control its size. I still want to keep the line, but at the moment it’s way longer than my logo and I can’t figure out to make it about 20 pixels. If I resize the background with the percentage, then my logo is cropped or it’s too small.

Hope you can help me out,

Thanks for your help!

Hello there,

You could use this code:

    .header-slider .slide-item:nth-of-type(2) .text-slider .maintitle:after {
      width: 20px;
      margin-left: -10px;
      background-color: #fff000;
    }

Please note that the negative margin left value should always be a half of specified width to make it exactly centered.

Regards,
Kharis