logo logo
✕

G2S Website Builder

Account
Your account area
Snippets
HTML Snippets
Documentation
Learn how to use the G2S
Bug Report
In BETA Please report bugs
✕

HTML Snippets

Overview Alerts
Alert Message Box
Images
BG Image With Text Overlay

Other Links

Request a Snippet
Report a Bug
Learn About Snippets
❯

HTML Background Image/Video With Text Overlay

How to create a full-width header image with text overlay using HTML and CSS.

Style: Style 1| Style 2

Align: Left| Center| Right

Type: Background Image| Video| Video Iframe

Title

Subtitle

Description

Button
Free Stock Videos by Videezy.com
                
                    <div class="bg-img bg-img-style-1">
    <div class="bg-img-overlay bg-img-align-center">
        <div class="bg-img-content">
            <h1 class="bg-img-title">Title</h1>
            <h2 class="bg-img-subtitle">Subtitle</h2>
            <p class="bg-img-description">Description</p>
            <a class="bg-img-btn" href="#">Button</a>
        </div>
    </div>
</div>
                
                
                    <div class="bg-img bg-img-style-1">
    <video preload autoplay muted playsinline loop>
        <source src="https://static.videezy.com/system/resources/previews/000/036/644/original/Fancy-1.mp4" type="video/mp4">
    </video>
    <div class="bg-img-overlay bg-img-align-center">
        <div class="bg-img-content">
            <h1 class="bg-img-title">Title</h1>
            <h2 class="bg-img-subtitle">Subtitle</h2>
            <p class="bg-img-description">Description</p>
            <a class="bg-img-btn" href="#">Button</a>
        </div>
    </div>
</div>
                
                
                    <div class="bg-img bg-img-style-1">
    <div class="bg-img-iframe-bg">
        <div class="bg-img-iframe-container">
            <iframe title="myvideo" src="https://www.youtube.com/embed/BHACKCNDMW8?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&mute=1;start=10" frameborder="0"></iframe>
        </div>
    </div>
    <div class="bg-img-overlay bg-img-align-center">
        <div class="bg-img-content">
            <h1 class="bg-img-title">Title</h1>
            <h2 class="bg-img-subtitle">Subtitle</h2>
            <p class="bg-img-description">Description</p>
            <a class="bg-img-btn" href="#">Button</a>
        </div>
    </div>
</div>
                
    
                
                    /* Background Image */
.bg-img {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 500px;
    overflow: hidden;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("https://g2s.io/imgs/default/background.jpg");
}
/* Overlay Color */
.bg-img-overlay {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: table;
    overflow: hidden;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.4);
}
.bg-img-content {
    padding: 0 64px;
    display: table-cell;
    vertical-align: middle;
}
.bg-img-align-left,
.bg-img-align-left .bg-img-description {
    text-align: left;
}
.bg-img-align-right,
.bg-img-align-right .bg-img-description {
    text-align: right;
}
.bg-img-align-center,
.bg-img-align-center .bg-img-description {
    text-align: center;
}
/* Title - Style-1 */
.bg-img-style-1 .bg-img-title {
    color: white;
    padding: 0;
    font-size: 40px;
}
/* Remove the top margin from the first child */
.bg-img .bg-img-overlay .bg-img-content :first-child {
    margin-top: 0;
}
/* Remove the bottom margin from the last child */
.bg-img .bg-img-overlay .bg-img-content :last-child {
    margin-bottom: 0;
}
/* Subtitle - Style-1 */
.bg-img-style-1 .bg-img-subtitle {
    color: white;
    font-size: 30px;
}
/* Description - Style-1 */
.bg-img-style-1 .bg-img-description {
    color: white;
    font-size: 20px;
}
/* Title - Style-2 */
.bg-img-style-2 .bg-img-title {
    color: white;
    font-size: 60px;
    text-transform: uppercase;
    margin-bottom: 10px;
}
/* Subtitle - Style-2 */
.bg-img-style-2 .bg-img-subtitle {
    color: white;
    font-size: 30px;
    margin-top: 0;
    margin-bottom: 16px;
}
/* Description - Style-2 */
.bg-img-style-2 .bg-img-description {
    color: white;
    font-size: 20px;
}
/* Button */
.bg-img .bg-img-btn {
    color: white;
    font-size: 16px;
    margin-top: 16px;
    padding: 16px 32px;
    display: inline-block;
    border: 1px solid white;
    border-radius: 10px;
    cursor: pointer;
    text-transform: uppercase;
    transition: 0.5s;
    text-decoration: none;
}
/* Button Hover */
.bg-img .bg-img-btn:hover {
    background-color: #3070C0;
}
/* Change styles on mobile */
@media screen and (max-width:700px) {
    /* Padding */
    .bg-img .bg-img-overlay .bg-img-content {
        padding: 0 16px;
    }
    /* Title - Style-1 */
    .bg-img-style-1 .bg-img-title {
        font-size: 1.4em;
    }
    /* Subtitle - Style-1 */
    .bg-img-style-1 .bg-img-subtitle {
        font-size: 1.2em;
    }
    /* Description - Style-1 */
    .bg-img-style-1 .bg-img-description {
        font-size: 1em;
    }
    /* Title - Style-2 */
    .bg-img-style-2 .bg-img-title {
        font-size: 1.7em;
    }
    /* Subtitle - Style-2 */
    .bg-img-style-2 .bg-img-subtitle {
        font-size: 1.2em;
    }
    /* Description - Style-2 */
    .bg-img-style-2 .bg-img-description {
        font-size: 1em;
    }
}
/* Video <video> */
.bg-img video {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
}
/* Video <iframe> */
.bg-img .bg-img-iframe-bg {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    position: absolute;
}
.bg-img .bg-img-iframe-container,
.bg-img .bg-img-iframe-bg iframe {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
}
.bg-img .bg-img-iframe-container {
    height: 300%;
    top: -100%;
}
@media screen and (max-width:1060px) {
    .bg-img .bg-img-iframe-container {
        width: 300%;
        left: -100%;
    }
}
                
    
                
                    <!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
	<style>
		/* Background Image */
		.bg-img {
			margin: 0;
			padding: 0;
			width: 100%;
			height: 500px;
			overflow: hidden;
			position: relative;
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			background-image: url("https://g2s.io/imgs/default/background.jpg");
		}
		/* Overlay Color */
		.bg-img-overlay {
			margin: 0;
			padding: 0;
			width: 100%;
			height: 100%;
			display: table;
			overflow: hidden;
			position: absolute;
			background-color: rgba(0, 0, 0, 0.4);
		}
		.bg-img-content {
			padding: 0 64px;
			display: table-cell;
			vertical-align: middle;
		}
		.bg-img-align-left,
		.bg-img-align-left .bg-img-description {
			text-align: left;
		}
		.bg-img-align-right,
		.bg-img-align-right .bg-img-description {
			text-align: right;
		}
		.bg-img-align-center,
		.bg-img-align-center .bg-img-description {
			text-align: center;
		}
		/* Title - Style-1 */
		.bg-img-style-1 .bg-img-title {
			color: white;
			padding: 0;
			font-size: 40px;
		}
		/* Remove the top margin from the first child */
		.bg-img .bg-img-overlay .bg-img-content :first-child {
			margin-top: 0;
		}
		/* Remove the bottom margin from the last child */
		.bg-img .bg-img-overlay .bg-img-content :last-child {
			margin-bottom: 0;
		}
		/* Subtitle - Style-1 */
		.bg-img-style-1 .bg-img-subtitle {
			color: white;
			font-size: 30px;
		}
		/* Description - Style-1 */
		.bg-img-style-1 .bg-img-description {
			color: white;
			font-size: 20px;
		}
		/* Title - Style-2 */
		.bg-img-style-2 .bg-img-title {
			color: white;
			font-size: 60px;
			text-transform: uppercase;
			margin-bottom: 10px;
		}
		/* Subtitle - Style-2 */
		.bg-img-style-2 .bg-img-subtitle {
			color: white;
			font-size: 30px;
			margin-top: 0;
			margin-bottom: 16px;
		}
		/* Description - Style-2 */
		.bg-img-style-2 .bg-img-description {
			color: white;
			font-size: 20px;
		}
		/* Button */
		.bg-img .bg-img-btn {
			color: white;
			font-size: 16px;
			margin-top: 16px;
			padding: 16px 32px;
			display: inline-block;
			border: 1px solid white;
			border-radius: 10px;
			cursor: pointer;
			text-transform: uppercase;
			transition: 0.5s;
			text-decoration: none;
		}
		/* Button Hover */
		.bg-img .bg-img-btn:hover {
			background-color: #3070C0;
		}
		/* Change styles on mobile */
		@media screen and (max-width:700px) {
			/* Padding */
			.bg-img .bg-img-overlay .bg-img-content {
				padding: 0 16px;
			}
			/* Title - Style-1 */
			.bg-img-style-1 .bg-img-title {
				font-size: 1.4em;
			}
			/* Subtitle - Style-1 */
			.bg-img-style-1 .bg-img-subtitle {
				font-size: 1.2em;
			}
			/* Description - Style-1 */
			.bg-img-style-1 .bg-img-description {
				font-size: 1em;
			}
			/* Title - Style-2 */
			.bg-img-style-2 .bg-img-title {
				font-size: 1.7em;
			}
			/* Subtitle - Style-2 */
			.bg-img-style-2 .bg-img-subtitle {
				font-size: 1.2em;
			}
			/* Description - Style-2 */
			.bg-img-style-2 .bg-img-description {
				font-size: 1em;
			}
		}
	</style>
 ​
	<snippet-template img-src="https://g2s.io/imgs/default/background.jpg" content="innerHtml" style="1" align="center"
		height="500px" overlay="rgba(0, 0, 0, 0.4)" bg-position="center" bg-size="cover" bg-repeat="no-repeat">
		<h1 class="bg-img-title">Title</h1>
		<h2 class="bg-img-subtitle">Subtitle</h2>
		<p class="bg-img-description">Description</p>
		<a class="bg-img-btn" href="#">Button</a>
	</snippet-template>
 ​
	<div class="bg-img bg-img-style-{{style}}"
		style="height: {{height}}; background-position: {{bg-position}}; background-size: {{bg-size}}; background-image: url({{img-src}}); background-repeat: {{bg-repeat}};">
		<div class="bg-img-overlay bg-img-align-{{align}}" style="background-color: {{overlay}};">
			<div class="bg-img-content">
				{{content}}
			</div>
		</div>
	</div>
 ​
</body>
</html>
                
               
                    <!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
	<style>
		/* Background Image */
		.bg-img {
			margin: 0;
			padding: 0;
			width: 100%;
			height: 500px;
			overflow: hidden;
			position: relative;
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			background-image: url("https://g2s.io/imgs/default/background.jpg");
		}
		/* Overlay Color */
		.bg-img-overlay {
			margin: 0;
			padding: 0;
			width: 100%;
			height: 100%;
			display: table;
			overflow: hidden;
			position: absolute;
			background-color: rgba(0, 0, 0, 0.4);
		}
		.bg-img-content {
			padding: 0 64px;
			display: table-cell;
			vertical-align: middle;
		}
		.bg-img-align-left,
		.bg-img-align-left .bg-img-description {
			text-align: left;
		}
		.bg-img-align-right,
		.bg-img-align-right .bg-img-description {
			text-align: right;
		}
		.bg-img-align-center,
		.bg-img-align-center .bg-img-description {
			text-align: center;
		}
		/* Title - Style-1 */
		.bg-img-style-1 .bg-img-title {
			color: white;
			padding: 0;
			font-size: 40px;
		}
		/* Remove the top margin from the first child */
		.bg-img .bg-img-overlay .bg-img-content :first-child {
			margin-top: 0;
		}
		/* Remove the bottom margin from the last child */
		.bg-img .bg-img-overlay .bg-img-content :last-child {
			margin-bottom: 0;
		}
		/* Subtitle - Style-1 */
		.bg-img-style-1 .bg-img-subtitle {
			color: white;
			font-size: 30px;
		}
		/* Description - Style-1 */
		.bg-img-style-1 .bg-img-description {
			color: white;
			font-size: 20px;
		}
		/* Title - Style-2 */
		.bg-img-style-2 .bg-img-title {
			color: white;
			font-size: 60px;
			text-transform: uppercase;
			margin-bottom: 10px;
		}
		/* Subtitle - Style-2 */
		.bg-img-style-2 .bg-img-subtitle {
			color: white;
			font-size: 30px;
			margin-top: 0;
			margin-bottom: 16px;
		}
		/* Description - Style-2 */
		.bg-img-style-2 .bg-img-description {
			color: white;
			font-size: 20px;
		}
		/* Button */
		.bg-img .bg-img-btn {
			color: white;
			font-size: 16px;
			margin-top: 16px;
			padding: 16px 32px;
			display: inline-block;
			border: 1px solid white;
			border-radius: 10px;
			cursor: pointer;
			text-transform: uppercase;
			transition: 0.5s;
			text-decoration: none;
		}
		/* Button Hover */
		.bg-img .bg-img-btn:hover {
			background-color: #3070C0;
		}
		/* Change styles on mobile */
		@media screen and (max-width:700px) {
			/* Padding */
			.bg-img .bg-img-overlay .bg-img-content {
				padding: 0 16px;
			}
			/* Title - Style-1 */
			.bg-img-style-1 .bg-img-title {
				font-size: 1.4em;
			}
			/* Subtitle - Style-1 */
			.bg-img-style-1 .bg-img-subtitle {
				font-size: 1.2em;
			}
			/* Description - Style-1 */
			.bg-img-style-1 .bg-img-description {
				font-size: 1em;
			}
			/* Title - Style-2 */
			.bg-img-style-2 .bg-img-title {
				font-size: 1.7em;
			}
			/* Subtitle - Style-2 */
			.bg-img-style-2 .bg-img-subtitle {
				font-size: 1.2em;
			}
			/* Description - Style-2 */
			.bg-img-style-2 .bg-img-description {
				font-size: 1em;
			}
		}
		/* Video <video> */
		.bg-img video {
			margin: 0;
			padding: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			position: absolute;
		}
		/* Video <iframe> */
		.bg-img .bg-img-iframe-bg {
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100vw;
			position: absolute;
		}
		.bg-img .bg-img-iframe-container,
		.bg-img .bg-img-iframe-bg iframe {
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			position: absolute;
		}
		.bg-img .bg-img-iframe-container {
			height: 300%;
			top: -100%;
		}
		@media screen and (max-width:1060px) {
			.bg-img .bg-img-iframe-container {
				width: 300%;
				left: -100%;
			}
		}
	</style>
​
	<snippet-template vid-src="https://static.videezy.com/system/resources/previews/000/036/644/original/Fancy-1.mp4"
		img-src="https://g2s.io/imgs/default/background.jpg" content="innerHtml" style="1" align="center" height="500px"
		overlay="rgba(0, 0, 0, 0.4)" bg-position="center" bg-size="cover" bg-repeat="no-repeat">
		<h1 class="bg-img-title">Title</h1>
		<h2 class="bg-img-subtitle">Subtitle</h2>
		<p class="bg-img-description">Description</p>
		<a class="bg-img-btn" href="#">Button</a>
	</snippet-template>
​
	<div class="bg-img bg-img-style-{{style}}"
		style="height: {{height}}; background-position: {{bg-position}}; background-size: {{bg-size}}; background-image: url({{img-src}}); background-repeat: {{bg-repeat}};">
		<video preload autoplay muted playsinline loop>
			<source src="{{vid-src}}" type="video/mp4">
		</video>
		<div class="bg-img-overlay bg-img-align-{{align}}" style="background-color: {{overlay}};">
			<div class="bg-img-content">
				{{content}}
			</div>
		</div>
	</div>
​
</body>
</html>
                
                
                    <!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
	<style>
		/* Background Image */
		.bg-img {
			margin: 0;
			padding: 0;
			width: 100%;
			height: 500px;
			overflow: hidden;
			position: relative;
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			background-image: url("https://g2s.io/imgs/default/background.jpg");
		}
		/* Overlay Color */
		.bg-img-overlay {
			margin: 0;
			padding: 0;
			width: 100%;
			height: 100%;
			display: table;
			overflow: hidden;
			position: absolute;
			background-color: rgba(0, 0, 0, 0.4);
		}
		.bg-img-content {
			padding: 0 64px;
			display: table-cell;
			vertical-align: middle;
		}
		.bg-img-align-left,
		.bg-img-align-left .bg-img-description {
			text-align: left;
		}
		.bg-img-align-right,
		.bg-img-align-right .bg-img-description {
			text-align: right;
		}
		.bg-img-align-center,
		.bg-img-align-center .bg-img-description {
			text-align: center;
		}
		/* Title - Style-1 */
		.bg-img-style-1 .bg-img-title {
			color: white;
			padding: 0;
			font-size: 40px;
		}
		/* Remove the top margin from the first child */
		.bg-img .bg-img-overlay .bg-img-content :first-child {
			margin-top: 0;
		}
		/* Remove the bottom margin from the last child */
		.bg-img .bg-img-overlay .bg-img-content :last-child {
			margin-bottom: 0;
		}
		/* Subtitle - Style-1 */
		.bg-img-style-1 .bg-img-subtitle {
			color: white;
			font-size: 30px;
		}
		/* Description - Style-1 */
		.bg-img-style-1 .bg-img-description {
			color: white;
			font-size: 20px;
		}
		/* Title - Style-2 */
		.bg-img-style-2 .bg-img-title {
			color: white;
			font-size: 60px;
			text-transform: uppercase;
			margin-bottom: 10px;
		}
		/* Subtitle - Style-2 */
		.bg-img-style-2 .bg-img-subtitle {
			color: white;
			font-size: 30px;
			margin-top: 0;
			margin-bottom: 16px;
		}
		/* Description - Style-2 */
		.bg-img-style-2 .bg-img-description {
			color: white;
			font-size: 20px;
		}
		/* Button */
		.bg-img .bg-img-btn {
			color: white;
			font-size: 16px;
			margin-top: 16px;
			padding: 16px 32px;
			display: inline-block;
			border: 1px solid white;
			border-radius: 10px;
			cursor: pointer;
			text-transform: uppercase;
			transition: 0.5s;
			text-decoration: none;
		}
		/* Button Hover */
		.bg-img .bg-img-btn:hover {
			background-color: #3070C0;
		}
		/* Change styles on mobile */
		@media screen and (max-width:700px) {
			/* Padding */
			.bg-img .bg-img-overlay .bg-img-content {
				padding: 0 16px;
			}
			/* Title - Style-1 */
			.bg-img-style-1 .bg-img-title {
				font-size: 1.4em;
			}
			/* Subtitle - Style-1 */
			.bg-img-style-1 .bg-img-subtitle {
				font-size: 1.2em;
			}
			/* Description - Style-1 */
			.bg-img-style-1 .bg-img-description {
				font-size: 1em;
			}
			/* Title - Style-2 */
			.bg-img-style-2 .bg-img-title {
				font-size: 1.7em;
			}
			/* Subtitle - Style-2 */
			.bg-img-style-2 .bg-img-subtitle {
				font-size: 1.2em;
			}
			/* Description - Style-2 */
			.bg-img-style-2 .bg-img-description {
				font-size: 1em;
			}
		}
		/* Video <video> */
		.bg-img video {
			margin: 0;
			padding: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			position: absolute;
		}
		/* Video <iframe> */
		.bg-img .bg-img-iframe-bg {
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100vw;
			position: absolute;
		}
		.bg-img .bg-img-iframe-container,
		.bg-img .bg-img-iframe-bg iframe {
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			position: absolute;
		}
		.bg-img .bg-img-iframe-container {
			height: 300%;
			top: -100%;
		}
		@media screen and (max-width:1060px) {
			.bg-img .bg-img-iframe-container {
				width: 300%;
				left: -100%;
			}
		}
	</style>
​
	<snippet-template iframe-src="https://www.youtube.com/embed/BHACKCNDMW8?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&mute=1;start=10"
		img-src="https://g2s.io/imgs/default/background.jpg" content="innerHtml" style="1" align="center" height="500px"
		overlay="rgba(0, 0, 0, 0.4)" bg-position="center" bg-size="cover" bg-repeat="no-repeat">
		<h1 class="bg-img-title">Title</h1>
		<h2 class="bg-img-subtitle">Subtitle</h2>
		<p class="bg-img-description">Description</p>
		<a class="bg-img-btn" href="#">Button</a>
	</snippet-template>
​
	<div class="bg-img bg-img-style-{{style}}"
		style="height: {{height}}; background-position: {{bg-position}}; background-size: {{bg-size}}; background-image: url({{img-src}}); background-repeat: {{bg-repeat}};">
		<div class="bg-img-iframe-bg">
			<div class="bg-img-iframe-container">
				<iframe title="myvideo" src="{{iframe-src}}" frameborder="0"></iframe>
			</div>
		</div>
		<div class="bg-img-overlay bg-img-align-{{align}}" style="background-color: {{overlay}};">
			<div class="bg-img-content">
				{{content}}
			</div>
		</div>
	</div>
​
</body>
</html>
Previous Next