Canvas Support

Title background

5 replies·opened Sep 8, 2022
M
mschejbalSep 8, 2022

Hi,

Is there a way to insert an image into a title background? If so, if I wanted to do that on multiple pages with different image on each page, I would have to create a separate section in css file, correct? Could you point me to a correct location within a css file?

Thank you,
Maciek

<!-- Page Title
	============================================= -->
	<section id="page-title">

		<div class="container clearfix">
			<h1 align="center">Portfolio</h1>
			
		</div>

	</section><!-- #page-title end -->
S
SemiColonWebSTAFFSep 8, 2022

Hello,

Please consider using this Template's Page-Title Block: https://themes.semicolonweb.com/html/canvas/page-title-parallax.html . Example:

<section id="page-title" class="page-title-parallax page-title-dark" style="background-image: url('images/parallax/8.jpg'); background-size: cover; padding: 120px 0;" data-bottom-top="background-position:0px 0px;" data-top-bottom="background-position:0px -300px;">
	<div class="container">
		<h1>Page Title Parallax</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>

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.

M
mschejbalSep 8, 2022

That's great, thank you!

M
mschejbalSep 10, 2022

Hi,

I use the image background you suggested on the pages of lincolngoines.com but there is that annoying upward jump of the background image resulting in obstructing the featured face, any idea how to avoid that?

http://lincolngoines.com/news.html

Thank you,
Maciek

S
SemiColonWebSTAFFSep 11, 2022

Hello,

In order to fix this, we recommend removing the data-bottom-top="background-position:0px 440px;" data-top-bottom="background-position:0px -500px;" Attributes from the #page-title Tag.

Hope this Helps!

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

M
mschejbalSep 11, 2022

Beautiful, thanks!

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