Mobile app version of vmapp.org
Login or Join
Margaret771

: Create a cloud using filter and then have that be transparent in parts so I have been reading, and following tutorials for about 8 hours now. My head hurts. I'm frustrated and it's late

@Margaret771

Posted in: #Background #Transparency #WebsiteDesign

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!

10.01% popularity Vote Up Vote Down


Login to follow query

More posts by @Margaret771

1 Comments

Sorted by latest first Latest Oldest Best

 

@Sims5801359

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.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme