Semi-Transparent Color Overlay on Front-Page-1 Background Image

Tagged: aspire, background images, overlays, transparency

This topic has 2 replies, 2 voices, and was last updated 7 years, 1 month ago by Eric.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

Posts
February 26, 2017 at 12:15 pm #20671
kmicks
Customer
Hello,
I have been struggling to add a semi-transparent color overlay to my background image on my homepage using CSS (although, this is something I would like to do for other images as well). I have looked into linear gradients, but had no luck in actually getting it to work. (Typically I could only get either my image to show OR the color, but not both and not semi-transparent.

I have a few links below that show different variations of what I would like to accomplish…any assistance would be greatly appreciated.

example 1

example 2

example 3

Kevin
February 26, 2017 at 12:18 pm #20672
kmicks
Customer
This is the site I am looking to apply this to, by the way: http://www.malaccadispatch.com
March 1, 2017 at 1:50 am #20706
Eric
Customer
Since this is a customization request, I’d recommend either searching for the terms – “semi-transparent color overlay css” or hire a dev to code it for you if you’re not familiar with CSS. Before you do that, first run a search and you’ll see some tutorials out there that may already cover what you’re looking to achieve.

Here’s an example – http://stackoverflow.com/questions/9182978/semi-transparent-color-layer-over-background-image

And here – http://www.corelangs.com/css/box/overlay.html

and there are many more that pop up when I run a Google search.

Try those out, and then you can tweak them to your needs.

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
Author

Posts

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.