I am using page-title-parallax-header.html as a guideline for a web page. What I need to do is to make the background size fit the size of the image, so the full image shows and scales as needed. I know there must be an easy way to do this, but I have run into nothing but problems. I actually do not care if it is parallax or not, just want a full image header that works on all devices properly.
Please help!
Hello,
This is Definitely Possible! Consider using the following HTML Code for the Page Title:
<!-- Page Title
============================================= -->
<section id="page-title" class="page-title-parallax nopadding">
<img src="images/parallax/9.jpg" alt="Page Title Image" style="width: 100%; height: auto;">
<div class="vertical-middle">
<div class="container clearfix">
<h1 data-animate="fadeInUp">Page Title Parallax</h1>
<span data-animate="fadeInUp" data-delay="300">A Short Page Title Tagline</span>
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Shortcodes</a></li>
<li class="active">Page Titles</li>
</ol>
</div>
</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