[hsandstrom]

Hi!
I have a problem with on my website. When I add a background image to the hero-section, the image overlay seems to get placed on top and everything else behind it. Everything gets darker, not only the background image and nothing is clickable, like links.

Is this supposed to happen or can I do anything about it?

Link to the page:
https://sandstrom.photo/#section2

[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? 🙂

[Skandha]

@hsandstrom: Hello there,
You seem to have used the following Code due to which the overlay is showing up.
#hero-section.has-section-background-image:before { background-color: rgba(0, 0, 0, 0.8); }

I will need to look into your site to remove the CSS Code. I have sent you an email. Please check your inbox as well as the spam folder.

Kind Regards,
Skandha

[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]

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;
}

[Skandha]

@hsandstrom: Hello there,
I am associated with the theme creators. You can check my profile for confirmation.

The CSS Code I mentioned above doesn’t seem to be used in the theme file that I checked at my end. So, in order to check where the code came from I asked you for your credentials.

Yes, that code works to disable the overlay on the Hero Content section.

Please let me know where you would like overlay so that I can help you out.

Kind Regards,
Skandha

[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.

[Skandha]

@hsandstrom: Hello there,
Please remove the CSS Code you have added above and then add the following Code.

#hero-section::before {
    background-color: rgba(0,0,0,0.5) !important;
}

Let me know if this is what you want!
Kind Regards,
Skandha

[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]

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;
	}
}

[Skandha]

@hsandstrom: Hello there,
Do you want the overlay to be place only to the background and not to the text container?

Kind Regards,
Skandha

[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.

[Author]

Posts