Viewing 11 replies - 1 through 11 (of 11 total)
  • Phil

    (@owendevelopment)

    Just create a semi-transparent png using the colour of your choice at 80% opacity. Make it 1px X 1px and then use that as the container background for your content set to repeat. You can also do it with CSS but I always get better results using a 1px image as the background.

    Thread Starter anyadekker

    (@anyadekker)

    Thank you! Can you please tell me how to create that png? (sorry i’m new to this)

    Phil

    (@owendevelopment)

    Photoshop is the easiest way I know but other image editors may do it.

    You basically want 1px height, 1px width of black/white set at 80% transparency.

    Once you have that, upload it to your themes images folder and then use it via CSS:

    .whatevercontaineryoucallit {
    background: url(images/transparentpng.png) repeat;
    }

    Obviously change the name of transparentpng.png to whatever you call your image.

    Thread Starter anyadekker

    (@anyadekker)

    Thanks, I tried, but it doesn’t work. The only thing that happens is that my header disappears.
    This is my site: https://www.anyadekker.nl and I would like to have the white part transparent, the back is a little pink, and there I want a photo (which I can do in my theme settings)

    Phil

    (@owendevelopment)

    I take it you want to make the whole white container the transparent part, right?

    In your style.css, you’ll want to add in:

    #wrapper {
    background: url(images/transparentpng.png) repeat;
    }

    If you let me know where you uploaded the transparent image, I’ll give you more accurate instructions. ??

    Thread Starter anyadekker

    (@anyadekker)

    I made the image with GIMP. I added the code in style.css but now it looks like this: https://www.anyadekker.nl
    Now the image is just in my media on the WordPress dashboard

    I’m sure it’s something really stupid what i’m doing wrong but I don’t understand haha

    Phil

    (@owendevelopment)

    OK, don’t worry, just swap the CSS you added for wrapper and change it to this instead:

    #wrapper {
    background: url("/wp-content/uploads/2013/06/oie_transparent.png") repeat;
    width: 1020px;
    }

    That should fix your layout problem and correct the path to your image. Looking at the image, it looks very transparent so may not look do what you want it to do. If you make this change though, I’ll see if I can help you out with that ??

    Thread Starter anyadekker

    (@anyadekker)

    I’m sorry, but it’s still white. I uploaded an image so you can see what i mean. (the image is not the right size yet, but that’s no problem to fix for me, i think)

    Is it just my transparent image that isn’t right? or maybe i should add it somewhere else

    Phil

    (@owendevelopment)

    It looks like the theme is adding in White colour from the theme settings. This will override everything in style.css. If you can email me an admin login for your WP site and email it to phil(at)philowen.co, I will fix this for you (including the transparent image as well). ??

    Phil

    Phil

    (@owendevelopment)

    Got it. Will fix now ??

    Phil

    (@owendevelopment)

    Sent you email ??

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Transparent background Evolve theme’ is closed to new replies.