[Chris AParticipant]

On this website http://www.scubaventure.net I used custom CSS to replace my Scroll Bottom Anchor. How can I replace the anchor, but use a transparent background .png image? I’ll use a different .png than the one you currently see on this site.

My current CSS:

/* REPLACE DOWN ARROW */
.x-slider-scroll-bottom {
border: 0 !important;
background: url(/wp-content/uploads/2016/02/HomeDownArrow.png) no-repeat !important;
background-position: center !important;
}
/* REPLACE DOWN ARROW */
.x-slider-scroll-bottom i.x-icon-angle-down {
display: none;
}

Also: How would I modify the size (px height and width) so that I could use a larger Bottom Anchor image, and would you mind telling me how to adjust its position if I needed to move it up of down a few pixels? Thank you, Chris

[RupokMember]

Hi there,

It seems you already did it. What else you are trying to achieve now? To control the size you can set height, width and background size in same value like this :

.x-slider-scroll-bottom {
  background: rgba(0, 0, 0, 0) url("/wp-content/uploads/2016/02/HomeDownArrow.png") no-repeat scroll center center !important;
  border: 0 none !important;
  background-size: 100px;
  width: 100px;
  height: 100px;
}

Cheers!

[Chris AParticipant]

Thanks for the size change info. The problem I am having is that if I try to use a .png with a transparent background, the background appears white and not transparent. Can I have the Scroll Bottom Anchor appear with a transparent background? Thank you, Chris

[FriechModerator]

Hi There,

I am not seeing any white background on any element (except in the body), please add your .png image with a transparent background so we can take a closer look.

Thanks.

[Author]

Posts