Remove darkening gradient effect on Altitude background image

[jmgroup]

I would like to remove the darkening scroll effect on the Featured Background Image 1
on the Altitude theme.

Could you please show me how to do this? Many thanks.

Marcia Coffey

http://www.harrisonstone.com/new/

[Brad Dalton]

Link to a live site please so we can inspect the element.

---

Tutorials for StudioPress Themes.

[jmgroup]

Here is the live site:

http://www.harrisonstone.com/new/

Many thanks,
Marcia

[Brad Dalton]

Change this on line 1249:

.image-section {
	background: -moz-linear-gradient(top,  rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0.8) 80%, rgba(0,0,0,0.9) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.2)), color-stop(30%,rgba(0,0,0,0.5)), color-stop(80%,rgba(0,0,0,0.8)), color-stop(100%,rgba(0,0,0,0.9)));
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);
	background: -o-linear-gradient(top,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);
	background: -ms-linear-gradient(top,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);
	background: linear-gradient(to bottom,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33000000', endColorstr='#e6000000',GradientType=0 );
	display: table;
	overflow: hidden;
	table-layout: fixed;
	width: 100%;
}

To this:

.front-page-3 .image-section, 
.front-page-5 .image-section, 
.front-page-7 .image-section {
	background: -moz-linear-gradient(top,  rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0.8) 80%, rgba(0,0,0,0.9) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.2)), color-stop(30%,rgba(0,0,0,0.5)), color-stop(80%,rgba(0,0,0,0.8)), color-stop(100%,rgba(0,0,0,0.9)));
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);
	background: -o-linear-gradient(top,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);
	background: -ms-linear-gradient(top,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);
	background: linear-gradient(to bottom,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33000000', endColorstr='#e6000000',GradientType=0 );
	display: table;
	overflow: hidden;
	table-layout: fixed;
	width: 100%;
}

---

Tutorials for StudioPress Themes.

[jmgroup]

Hi Brad,

Thank you for this. But, when I just add the new code you sent me to my custom style sheet,
no changes are made on the site. Am I missing something?

Marcia

[detroitwidget]

Marcia,

On or about CSS line 1316, change this:

.front-page-1 .image-section {
    padding-top: 75px;
}

To this:

.front-page-1 .image-section {
    padding-top: 75px;
    background-image: none;
}

This won't remove your background image, but should override the background gradient overlay.

Example here:

f1roadcar.com

I hope this helps.

[Brad Dalton]

Edit not add. The CSS edits are tested and work.

---

Tutorials for StudioPress Themes.

[jmgroup]

Good morning Brad,

Thank you kindly for the latest code. It worked PERFECTLY!

Best regards,
Marcia

[Brad Dalton]

Good stuff!

---

Tutorials for StudioPress Themes.

[Author]

Posts