shadow on header image…

css…

.panel-image:before {
/* Permalink – use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.3+100 */ /* FF3.6-15 */
background: -webkit-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%); /* Chrome10-25,Safari5.1-6 */
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0)));
background: -webkit-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=”#00000000″, endColorstr=”#00000000″, GradientType=0); /* IE6-9 */
/* bottom: 0; */
/* content: “”; */
/* left: 0; */
/* right: 0; */
/* position: absolute; */
/* top: 100px; */
}

That should do it. It works on my dev server anyway.

strangely – it didn’t work for me. I even took out the whole .panel-image:before section and it still generated the overlay.

My mistake – I had a custom media header plugin that changed how the overlay was referenced. Thanks for the info!

• This reply was modified 8 years ago by edit4ever.

Hi! I have the same problem and the code also did’nt work work for me. It might have to do with the fact I also installed a plug-in (‘advanced twenty seventeen’, which alows me to customize the Twenty Seventeen theme). I found the code I had to cahnge in the stylesheet, so I looked at the style sheet in the ‘advanded twenty seventeen plugin’ too, but don’t see what I should be editing there. Do you maybe have suggestions to help me?

The code in the stylesheet of the plugin looks like this:

*/
@import url(‘../twentyseventeen/style.css’);

.ats-align-left {
text-align: left;
}

.ats-align-center {
text-align: center;
}

.ats-align-right {
text-align: right;
}

.ats-layout-boxed #page,
.ats-layout-boxed .site-navigation-fixed {
max-width: 1170px;
margin-left: auto;
margin-right: auto;
}

.site-footer .ats-wrap1 {
padding-bottom: 0;
}

.site-footer .ats-wrap2 {
padding-top: 30px;
}

.footer-copyright-container {
margin-top: -30px;
}

.ats-hide-panel-title .twentyseventeen-panel .entry-header {
display: none;
}

.ats-hide-panel-title .twentyseventeen-panel .entry-content {
float: none !important;
width: 100% !important;
}

@media (max-width: 1170px) {
.ats-preview.ats-layout-boxed #page,
.ats-preview.ats-layout-boxed .site-navigation-fixed {
max-width: 960px;
}
}

@media screen and (min-width: 30em) {
.ats-widget-area-advanced .widget-column {
float: left !important;
padding-left: 15px !important;
padding-right: 15px !important;
}

.ats-widget-area-advanced .widget-column:first-child {
padding-left: 0 !important;
}

.ats-widget-area-advanced .widget-column:last-child {
padding-right: 0 !important;
}
}

@media screen and (max-width: 48em) {
.ats-widget-area-advanced .widget-column {
width: 100% !important;
}
}

• This reply was modified 8 years ago by catinka88.
• This reply was modified 8 years ago by catinka88.

Hello I ask the same question days ago.
the answer is one line answer. Please find my question in the listing