Code-Create/src/pages/help-centre/title.vue

<script setup lang="ts">
defineExpose({})
</script>
<template>
	<section class="title-section">
		<div class="content">
			<div class="text">
				<h1>{{ $t('helpCentre.Title') }}</h1>
			</div>
		</div>
	</section>
</template>
<style lang="less" scoped>
	.title-section{
		width: 100%;
		background-color: #000000;
		background-image: url(https://s3.ap-east-1.amazonaws.com/code-create.com.hk/2022/11/helpcentre_banner-1.jpg);
		background-position: top center;
		background-repeat: no-repeat;
		background-size: auto;
		background-attachment: fixed;
		@media (max-width: 1000px) {
			background-attachment: scroll;
		}
		> .content{
			max-width: 1400px;
			margin: 0 auto;
			@media (max-width: 1000px) {
				max-width: 1000px;
			}
			> .text{
				padding: 200px 300px;
				position: relative;
				@media (max-width: 1000px) {
					padding: 100px 15px;	
				}
				> h1{
					text-align: center;
					font-size: 64px;
					font-weight: 600;
					line-height: 64px;
					letter-spacing: 2px;
					color: #FFFFFF;
					@media (max-width: 1000px) {
						font-size: 40px;
					}
				}
				> img{
					position: absolute;
					top: 0;
					right: 0;
					z-index: -1;
					height: 100%;
					width: 100%;
					object-fit: cover;
				}
			}
		}
	}
</style>