Position Text Over an Image HTML CSS responsive
How to » Position Text Over an Image HTML CSS responsive
Study in this chapter:
1. - How can I create text on image HTML CSS responsive?
Internal Style - by using a <style> element in the <head> section
External Style - by using an external CSS file as style.css
Example:
Position Text Over an Image HTML CSS
Position Text Over an Image: bottom left, top left, top right, bottom right andcentered.
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>.container {
position: relative;
text-align: center;
color: white;
}
.main-container {
position: relative;
text-align: center;
color: white;
width: 70%;
margin-top: 4px;
margin-right: auto;
margin-bottom: 4px;
margin-left: auto;
}.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
.top-left {
position: absolute;
top: 8px;
left: 16px;
}
.top-right {
position: absolute;
top: 8px;
right: 16px;
}
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<body>
<div class="main-container">
<div class="container">
<img src="https://www.agernic.com/uploads/nice-france.jpg" alt="nice-france" style="width:100%;">
<div class="bottom-left">Bottom Left <br /> bla bla</div>
<div class="top-left">Top Left<br /> bla bla</div>
<div class="top-right">Top Right<br /> bla bla</div>
<div class="bottom-right">Bottom Right<br /> bla bla</div>
<div class="centered">Centered<br /> bla bla</div>
</div>
</div></body>
</html>
Related subjects:
create search bar using CSS HTML
Shrink Navigation Menu on Scroll
Create a Sticky Navbar
Tex blocks right bottomt on image
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
font-family: Arial;
}
h2 {
color: #006;
}
p{
color: #666;
}
.main-container {
position: relative;
text-align: center;
color: white;
width: 70%;
margin-top: 4px;
margin-right: auto;
margin-bottom: 4px;
margin-left: auto;
}
.text-block {
position: absolute;
bottom: 20px;
right: 20px;
background-color: black;
color: white;
padding-left: 20px;
padding-right: 20px;
}
</style>
</head>
<body>
<div class="main-container">
<h2>Image Text Blocks</h2>
<p>How to place text blocks over an image:</p><div class="container">
<img src="https://www.agernic.com/uploads/nice-france.jpg" alt="Nature" style="width:100%;">
<div class="text-block">
<h4>Nature</h4>
<p>What a beautiful sunrise</p>
</div>
</div>
</div>
</body>
</html>
Tags: text over image css responsive, background image with text overlay, text over image html, How to make / put text responsive in image / picture CSS?
Image with Transparent Text
How to create an Image with Transparent Text
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}body {
font-family: Arial;
font-size: 17px;
}
h1 {
font-size: 18px;
}
.main-container {
position: relative;
text-align: center;
color: white;
width: 70%;
margin-top: 4px;
margin-right: auto;
margin-bottom: 4px;
margin-left: auto;
}
.container {
position: relative;
max-width: 800px;
margin: 0 auto;
}.container img {vertical-align: middle;}
.container .content {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0); /* Fallback color */
background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
color: #f1f1f1;
width: 70%;
padding: 8px;
margin-right: auto;
margin-bottom: auto;
}
</style>
</head>
<body>
<div class="main-container">
<h2>Responsive Image with Transparent Text</h2><div class="container">
<img src="https://www.agernic.com/uploads/nice-france.jpg" alt="Notebook" style="width:100%;">
<div class="content">
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet.
<br /> Tollit soleat phaedrum te duo.</p>
</div>
</div>
</div>
</body>
</html>
Summary of description
text over image css responsive, background image with text overlay, text over image html, How to make / put text responsive in image / picture CSS?
Position Text Over an Image HTML CSS responsive - how to
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.