Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #270198
    hsandstrom
    Participant

    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

    #270199
    hsandstrom
    Participant

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

    #270265
    Skandha
    Participant

    @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

    #270276
    hsandstrom
    Participant

    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.

    #270277
    hsandstrom
    Participant

    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;
    }
    #270299
    Skandha
    Participant

    @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

    #270323
    hsandstrom
    Participant

    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.

    #270454
    Skandha
    Participant

    @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

    #270581
    hsandstrom
    Participant

    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

    #270582
    hsandstrom
    Participant

    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;
    	}
    }
    #270673
    Skandha
    Participant

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

    Kind Regards,
    Skandha

    #270884
    hsandstrom
    Participant

    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.

Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Background image places on top’ is closed to new replies.