Adding an overlay to the showcase image

Support Themes & Styling
1

Hi! I’m trying to add an overlay to the showcase image(theme: Woo) however my attempts are futile.

Basically, i’d like to display the hero-text and button in the centre of the image, rather than above(or beneath), while also adding a mostly transparent box behind it so that it stays readable.

My website is: mark-nichols.net

Thanks!

2

hi !

It’ just CSS tweak, take a look Here Woo Repo

replace img/hero-bg.png with your hero img url add height style for instance height: 600px;
do the same with img/hero-bg_@2X.png but adjust height and maybe alternate version of your hero image

/* ------------------------------------------------------------------ */
/* c. Hero Section
/* ------------------------------------------------------------------ */

#hero {
   padding-top: 66px;
   background: #23292f url(img/hero-bg.png);
   overflow: hidden;
}

/* For high-res devices */
@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

	#hero { 
		background: #23292f url(img/hero-bg_@2X.png); 
		background-size: 200px 200px;
	}
  
}

See in action !

33
Capture d’écran 2018-02-27 à 10.09.33.jpg1805×721 574 KB

of course you don’t need the showcase_image (the one with phone, tablet and laptop), but adjust your height according to your needs.

To add an overlay

#hero .twelve {
	background-color: rgba(0, 0, 0, 0.8);
}

In a second time you can change the blueprint from showcase modular : for instance add a color field for overlay, and a media field to change the hero background etc Everything is possible with Grav.

The best way is to use theme inheritance to do your changes without modify original theme

Hope that helps

Dimitri