How do I add an overlay effect to the page title?

1 reply·opened Mar 6, 2021

high8skyMar 6, 2021

<!-- Page Title
		============================================= -->
		<section id="page-title" class="page-title-parallax page-title-dark" style="background-image: url('images/parallax/menu-parallax-bg-02.jpg'); background-size: cover; padding: 120px 0;" data-bottom-top="background-position:0px 0px;" data-top-bottom="background-position:0px -200px;">
			
			<div class="container clearfix">
				<h1>한식문화관</h1>
				<span>Korean Cuisine Culture Center</span>
				<ol class="breadcrumb">
					<li class="breadcrumb-item"><a href="index.html"><i class="icon-home"></i></a></li>
					<li class="breadcrumb-item"><a href="02_01_01_01.html">한식문화관</a></li>
					<li class="breadcrumb-item active" aria-current="page">한식문화관 안내</li>
				</ol>
			</div>
		
		</section><!-- #page-title end -->

SemiColonWebSTAFFMar 7, 2021

Hello,

Consider using this code:

<!-- Page Title
============================================= -->
<section id="page-title" class="page-title-parallax page-title-dark page-title-video">

	<div class="video-wrap">
		<div class="video-overlay"></div>
	</div>

	<div class="container clearfix">
		<h1>Page Title Video</h1>
		<span>A Short Page Title Tagline</span>
		<ol class="breadcrumb">
			<li class="breadcrumb-item"><a href="#">Home</a></li>
			<li class="breadcrumb-item"><a href="#">Shortcodes</a></li>
			<li class="breadcrumb-item active" aria-current="page">Page Titles</li>
		</ol>
	</div>

</section><!-- #page-title end -->

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard