[hsandstrom]

That’s correct!
If you look at my website and scroll down to the 2nd section (the one I call “Projects”) you can see that I have a background with 80% overlay. The background is dark and the content shows clearly and you can click on it.

I want the exact same thing on the 3rd section (the one I call “Phoneography”).

I have made the same settings on those two pages, I’ve added the background image and put overlay to 80. But the results differ, as you can see.

[hsandstrom]

Here is all of my custom CSS, if you want to check it. I can’t see anything that could possibly cause this problem.

/* Header */
#header-content {
	background-color:rgba(15,15,15,0.8) !important;
}
.header-top #header-content{
	background-color: #0f0f0f !important;
	/*position: sticky !important;*/
}

/* Front page text */
.custom-header-content .entry-header {
	text-shadow: 1px 1px 0px #000;
}
.custom-header-content .entry-summary p {
	text-shadow: 1px 1px 1px #000;
}

/* Customize cookie button */
.cookieBtn {
	color: #000 !important;
	background-color: #ffca27 !important;
}

/* Hide the search icon on project thumbnails */
.view-detail {
	display: none !important;
}

/* The front page button */
.more-link {
	background-color: #FF0000 !important;
	font-weight: bold !important;
	border-radius: 4px;
}

/* Portfolio section */
#portfolio-content-section .hentry-inner {
	border-bottom: 3px solid #e8e8e8;
	border-radius: 4px;
}

/* Hero section */
#hero-section::before {
    background-color: rgba(0,0,0,0.5) !important;
}
#hero-section .entry-container {
	background-color: rgba(0,0,0,0.4);
	padding: 20px !important;
	border-radius: 12px;
}
#hero-section h2 {
	color: #fff !important;
}
#hero-section a {
	color: #dcdcdc;
}

@media only screen and (max-width: 1023px) {
	/* Hide site identity */
	.site-identity {
		display: none !important;
	}
	/* Compensate for top menu on specific pages*/
	#portfolio-content-section h2, #hero-section h2{
		margin-top: 70px !important;
	}
}

[hsandstrom]

I’m afraid that didn’t work.
As you can see, the overlay gets placed on top of everything. You can’t click the link or even mark the text on that section. =/

https://sandstrom.photo/#section2

[hsandstrom]

I apologize for the outburst, but it felt really strange to give my login credentials to a stranger online.

Regarding the problem:
I haven’t added the CSS code that you referred to. I have just a few lines of custom CSS and this is not part of it. It has to come from the theme in some way…

On the second section of my page I’m using a background image with overlay to make it darker and let the content pop. I want the exact same thing on the third section. But as soon as I activate the background overlay it gets placed on top of everything, not just on top of the background image.

[hsandstrom]

I made a quick solve by removing the overlay completely. It works, but it also means that I can’t use an overlay on that specific section which is sad. It would have been better if the overlay worked as intended.

#hero-section.has-section-background-image:before {
	display: none !important;
}

[hsandstrom]

Hi @Skandha
First of all, the CSS you refer to comes from the theme itself. This is the overlay I’m talking about and that is causing the problem. I can’t do anything about it.

But most importantly:
Why are you asking me to give you my login credentials to my site? There is no way I’m giving you access to my website…

You are just referring to a CSS line created by the theme and asking me to give you login information. Is this some kind of scam? Are you even
associated with the theme creators?

I’m waiting for a really good answer, otherwise I’m definitely reporting this theme to WordPress as a scam.

[hsandstrom]

Also, if you scroll to the section below and then back up to the hero-section you can see how the overlay is out of place. Does anyone know how to fix that as well? 🙂

[Author]

Posts