Transparency background in Travelify

Travelify
1

hello,

how to get transparency background with .PNG images ?

I have some maps I would like to incrust in the page without borders around.

2

Where and how you want it to be transparent?
PNG images can be transparent if you create them that way.

Theme elements can be transparent too since you can use RGBA colors. For example

.wrapper {
    background-color: rgba(256,256,256,0.2);
}

This will make travelify theme wrapper div white-transparent with 20% opacity. YOu can use this example and apply it to any element.

3

thanks.
but I have put

/* Image borders */

img[class*=“align”],img[class*=“wp-image-”] {
/* Add fancy borders to all WordPress-added images but not things like badges and icons and the like */
background-color: #e9e9e9;
-webkit-box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);

so now even .png images get this box shadow.

4

Please take time and read what your css code does. It has comment tnat you haven’t bothered reading:

/* Add fancy borders to all WordPress-added images but not things like badges and icons and the like */

5

Can you explain please, my .png images are not badges or icons.

so what does that mean ?
what do you mean by badges ?

6

Please post your website URL with exact description what you are trying to achieve. Right now I see that you have no idea what you are talking here and what DOM and CSS classes are all about.

Your given code applies to all img[class*=“align”],img[class*=“wp-image-”] elements that are basically all images added inside your Posts/Pages. It doesn’t matter if PNG, GIF, JPG or JPEG. All will get shadow and background color you have added using your code mentioned above.

7

Good day.

HELP PLEASE!

I wonder if it is possible that you can assist me in getting the content background of my site transparent.

URL: www.adventure.wildernessbackpackers.com

I have managed to get the wrapper and all the rest transparent, but the content background is not co-operating. Here is what I have in my Travelify -Other Options custom CSS style:

.wrapper, #main {
background: transparent !important;
-webkit-box-shadow: none;
box-shadow: none;
}
#site-generator {
border: none;
}
.wrapper {
background-color: transparent;
}
.container {
background-color: rgba(255, 255, 255, 0.8);
}
.primary-content .primary-wrapper .item a.thumbnail, .primary-content .primary-wrapper {
background-color: rgba(0, 0, 0, 0);
}

8

@wildinfo This is old topic and to help us keep support thread separates could you please create your own thread for your question here https://colorlibsupport.com/c/travelify-support/ instead of replying on others thread as it makes the thread messy and hard to read.

If you want to you can also add reference of this thread in your newly created thread.

We would be more than happy to help you on your new thread.