I have been reading, and following tutorials for about 8 hours now. My head hurts. I'm frustrated and it's late :)

What I originally did with great success was have the color green and put a layer over that with clouds and made it transparent so that the solid green color wasn't so solid.

I had an idea.... why can't I have a background color specified in my CSS say "green" or "Red" and then have a picture as a background so the color shows through. This way, I can use the same image, and change the underlying color at my whim on my website. And since it's just a pattern ( I used clouds under filter?) but I don't know how to make this work - if it will work. I tried a gradient with foreground color to transparency but I don't think that will give me the correct results because I'm specifying a color.

To be honest - I don't even know if it's possible to do on the website. If I specify a background color and THEN specify a background image - won't the second one take precidence and the underlying color not be drawn at all?

In short - what I would like to do is... make a kind of parchment paper like you would buy in the store... the cloud pattern does that fine for me. I am hoping that I can just specify a background color and have it bleed through the repeating PNG image on top of it.

I was thinking about this - i don't know if it's possible... i had an idea after I wrote this - to make the image "soft" and "fluffy" like parchment paper different parts of the "clouds" would have different levels of transparency wouldn't they? The edge of the cloud would be barely transparent and the center of the cloud would be totally transparent... Maybe this isn't possible...

Any tips please? Is this possible?

Thank you for your time!

  • 1
    This question is better suited for StackExchange.com. You can do what you want easily via CSS body { background: #a00 url(path/to/cloud.png) repeat 0 0; } – Scott Apr 8 '12 at 7:35

I think what you're asking is whether you can set a solid background colour on your web page, then overlay a semi-transparent background image over that so some of the background colour shows through it.

The answer to that is yes.

Scott's comment provides the CSS rule to set both background colour and image. You will also need to ensure that your cloud PNG is saved with transparency.

I am guessing, but I think you might get the kind of results you're looking for by starting with a solid white image and using the Clouds filter to create the transparency map (or 'alpha mask').

You probably need to be more specific about what you've tried and where exactly you are having problems in order to get more useful help.

  • Hi there, sorry for taking so long to reply. You are correct - all I wanted to do is have a CSS background SOLID color and stick a transparent image over it and then stick text on top of it. So, in order from bottom to top - solid color (Say red, or green, or whatever, have a smudgy cloud style image over top, and then stick my text on it. The reason I want such a thing is... right now, I create a background image, and stick text on top. Works fine but everytime I want to change the color I have to pop into photoshop. I thought.. hey.. why not a transparent "overlay" on top of the – PerryCS Apr 14 '12 at 15:53
  • background color. Would save loading in a few images, eases development. The problem I have is... I don't know photoshop well enough. I don't know the STEPS. I can create a cloud image but I don't know how to make parts of the cloud see thru. The reason I want a cloudyish image is.. solid colors look boring and bland... a "fluffy" 2 toneish image in behind looks more pleasing to the eyes. I see someone down voted my question. Don't know why. Another question I had was... since I'm using background color can I ALSO set a background image on top of the color or will the – PerryCS Apr 14 '12 at 15:56
  • "lower on the css sheet" take precidence. Will the background IMAGE overwrite the background color... I guess I have some experimentation to do. It's not like someone can write a photoshop tutorial I guess to explain to me how to do the clouds with transparency anyways. How I figure transparency works in a PNG is... it's either a color, OR it's transparent allowing ALL the background color through. Unless a cloud which would create a fluffyish appeareance where the background color bleeds through in different intensities.... – PerryCS Apr 14 '12 at 15:56
  • What I've tried is creating a shape, setting foreground and background colors (light red, dark red || white, black || misc foreground, background colors), clicking Render, Clouds, and poof - I smudge it a bit and it creates a "fluffyish" color. How to make it transparent I have no idea. I'm using CS3. – PerryCS Apr 14 '12 at 16:09
  • 1
    @e100: Actually, you don't need PNG-24 for this. Technically you need PNG-32. PNG-24 is truecolor without transparency. PNG-32 is truecolor with transparency (including an alpha channel). I know some tools (including Photoshop) that presents it as PNG-24 with an extra option to set transparency, but when it is saved, it is actually created a PNG-32 image. – Aᵂᴱ Jun 14 '12 at 12:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.