Fix banner image scaling on Case Studies pages (#43056)

* image flow is synchronized with the responsive design.

* Update single.html

* Update quote.html

* fixed banner image

Author: alokkavilkar

layouts/case-studies/single.html

@@ -4,7 +4,7 @@
 {{ else }}
 	{{ if .Params.new_case_study_styles }}
 		<!-- Heading -->
-		<div class="banner {{ if .Params.use_gradient_overlay }}overlay{{ end }}" {{ if isset .Params "heading_background" }}style="background-image: url({{ .Params.heading_background }})"{{ end }}>
+		<div class="banner {{ if .Params.use_gradient_overlay }}overlay{{ end }}" {{ if isset .Params "heading_background" }}style="background-image: url({{ .Params.heading_background }});"{{ end }}>
 			<h1>
 				<span class="heading">{{ .Params.title_prefix | default "CASE STUDY:" }}</span>
 				{{- if isset .Params "heading_title_logo" -}}

layouts/shortcodes/case-studies/quote.html

@@ -1,5 +1,5 @@
 {{ if .Get "image" }}
-<div class="quote banner {{ if $.Page.Params.use_gradient_overlay }}overlay{{ end }}" style="background-image: url({{ .Get "image" }})">
+<div class="quote banner {{ if $.Page.Params.use_gradient_overlay }}overlay{{ end }}" style="background-image: url({{ .Get "image" }});">
 {{ else }}
 <div class="quote banner">
 {{ end }}

static/css/new-case-studies.css

@@ -66,7 +66,8 @@ h4[id]:before {
   padding-left: 11.9%;
   padding-right: 11.9%;
   font-size: 1.2em;
-  background-size: 100% auto;
+  background-position: center;
+  background-size: cover;
   background-color: #666;
   background-repeat: no-repeat;
 }