Home Page Image Filter

[jlkkline]

Hello,

I’m trying to remove the filter that appears on the main image on the home page (in the Winning Agent demo, the picture of the bed). I’ve looked through the code and cannot find the area where this is element is defined (I’m looking in the style.css code). Is there anyway that this can be changed?

Thank you,
Jordan

---

[Carrie Dils]

Look for this in your style.css and change that last number of .4 in background: rgba to another value to experiment on the background image shading (0 is complete transparency and 1 is full)

.home .search-bar {
     background-color: rgb(0, 0, 0);
     background: rgba(0, 0, 0, .4);
     padding-top: 250px;
     position: relative;
}

.home-welcome {
    background-color: rgba(0, 0, 0, 0.4);
}

---

[Bootstrappin]

Didn’t work for me.

Original
background-color: rgba(0, 0, 0, 0.4);

I’ve tried both of these (below) on two different WAPro themes with same result.
background-color: rgba(0, 0, 0, 0);
background-color: rgba(0, 0, 0, 1);

Result is about 1/4 of the background image being clear (top down), the rest has same shade as original.

Welcome thoughts…..

Thank you,
Greg

---

[Ginger Coolidge]

Hi Greg,

There are two areas you have to change and it sounds like you may have only changed one of them. Have a look at Carrie’s post and notice she lists .home-welcome and .home search-bar. If you only change one, you’ll see what you described.

---

[Bootstrappin]

Ginger,

That did the trick. Very pleased.

Thank you

---

[bellarafe]

Thank you Ginger & Carrie! Can you tell me where in the CSS to make the same change so that the image that appears behind the search bar on all other pages is also lighter?

For example: http://santabarbarasummers.com/about/

The home page is nice and light so we can see the image. But on other pages, like the About page, the background image is pretty dark. Thank you!

---

[Author]

Posts