How do I center a text over an image in css?
Here I'm attaching the code, I'm a newbie in css
<div class="image">
<img src="sample.png"/>
<div class="text">
<h2>Some text</h2>
</div>
</div>
<style>
.image {
position: relative;
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
margin: 0 auto;
width: 300px;
height: 50px;
}
</style>
How about something like this:
Its done by using position:absolute and z-index to place the text over the image.
#container {
height: 400px;
width: 400px;
position: relative;
}
#image {
position: absolute;
left: 0;
top: 0;
}
#text {
z-index: 100;
position: absolute;
color: white;
font-size: 24px;
font-weight: bold;
left: 150px;
top: 350px;
}
<div id="container">
<img id="image" src="http://www.noao.edu/image_gallery/images/d4/androa.jpg" />
<p id="text">
Hello World!
</p>
</div>
You can use something like the following:
JS Fiddle
.image {
position: relative;
}
img {
width: 100%;
height: 200px;
}
.text {
position: absolute;
bottom:0;
left: 0;
width: 100%;
}
.text h2 {
text-align: center;
color: #FFF;
}
<div class="image">
<img src="https://cdn.photographylife.com/wp-content/uploads/2015/10/Wadi-Rum-5-650x434.jpg" alt="My Image" />
<div class="text">
<h2>Some text</h2>
</div>
</div>
Related
Basically I'm trying to make a topbar with information on it, I was just about to change my stuff to a list till I noticed "The pink bar" going over the discord icon, how do I go about fixing this problem; the position is set to absolute.
* {
margin: 0;
}
body {
background: #a89ed2
}
.TopBar {
overflow: hidden;
position: relative;
background: #483467;
box-sizing: border-box;
}
#bottom {
position: absolute;
background: #ea5773;
width: 100%;
height: 10%;
left: 0;
top: 90%;
}
#media {
position: absolute;
display: inline-block;
left: 0%;
top: 0%;
}
#media img {
width: 15%;
height: 10%;
}
.wrapper1 {
padding: 2%
}
<body>
<div class=TopBar>
<div class=wrapper1>
<div id=bottom></div>
<div id=media>
<img src="https://cdn1.iconfinder.com/data/icons/logos-and-brands-3/512/91_Discord_logo_logos-512.png">
</div>
</div>
</div>
<div class=content></div>
</body>
Use id or class with double quotes(" classname | id ")
<!doctype HTML>
<html>
<body>
<div class="TopBar">
<div class="wrapper1">
<div id="bottom"></div>
<div id="media">
<img src="https://cdn1.iconfinder.com/data/icons/logos-and-brands-3/512/91_Discord_logo_logos-512.png">
</div>
</div>
</div>
<div class="content"></div>
</body>
</html>
Add a specific height to topbar and remove overflow:hidden
.TopBar {
height: 85px;
}
* {
margin: 0;
}
body {
background: #a89ed2
}
.TopBar {
overflow: hidden;
position: relative;
background: #483467;
box-sizing: border-box;
}
#media {
width: 100px;
height: 100px;
}
#media img {
max-width: 100%;
position: relative;
height: auto;
}
#media::before{
background: #ea5773;
width: 100%;
height: 10px;
position: absolute;
content: '';
bottom: 0;
left: 0;
right: 0;
}
.wrapper1 {
padding-bottom: 10px;
}
<body>
<div class="TopBar">
<div class="wrapper1">
<div id="media">
<img src="https://cdn1.iconfinder.com/data/icons/logos-and-brands-3/512/91_Discord_logo_logos-512.png">
</div>
</div>
</div>
<div class="content"></div>
</body>
I am using relative and absolute position but it doesn't work. what's my mistake?
My HTML code:
.slide-item {
text-align: center;
height: 400px;
position: relative;
}
.slide-item img {
display: block;
}
.slide-item .sale {
position: absolute;
top: -20px;
right: 20px;
display: block;
}
<div class="slide-item">
<div class="sale">
<img src="https://via.placeholder.com/50" alt="">
</div>
<img src="https://via.placeholder.com/150" class="arr-img" alt="">
</div>
Try this code...
<!DOCTYPE html>
<html>
<head>
<style>
.slide-item {
text-align: center;
height: 400px;
position: relative;
}
.slide-item img:nth-child(2){
position: relative;
width: 1150px;
height: 600px;
left: 65px;
top: 25px;
}
.slide-item img {
display: block;
}
.slide-item .sale img {
position: absolute;
top: 0px;
right: 150px;
z-index: 1;
}
</style>
</head>
<body>
<div class="slide-item">
<div class="sale">
<img src="img/icons8-round-128.png" alt="">
</div>
<img src="img/111713927-green-screen-green-background-green-screen-stock-footage-video.jpg" class="arr-img" alt="">
</div>
</body>
</html>
I want to announce on the top and header in the bottom but this is the output in every browser what am I doing wrong here
https://pasteboard.co/I67sPCe.png
this is my HTML code: https://hastebin.com/bocacehoka.js
this is my CSS code: https://hastebin.com/zapegulomu.css
.announce {
height: 45px;
width: 100%;
position: relative;
}
.header {
position: absolute;
height: 130px;
background: blue;
width: 100%;
bottom: 0;
}
<div class="announce">
<div class="header">
<img src="img/logo.png">
</div>
</div>
since you had bottom:0 to .header, the height of it was getting increased towards the top. Hope this helps thanks
.announce {
height: 45px;
width: 100%;
position: relative;
}
.header {
position: absolute;
height: 130px;
background: blue;
width: 100%;
/* bottom: 0; */
}
<div class="announce">
<div class="header">
<img src="img/logo.png" alt="image">
</div>
</div>
nested divs cannot be placed independently. Have two separate elements. consider the following.
announce {
height: 45px;
width: 100%;
position: relative;
}
.header {
position: absolute;
height: 130px;
background: blue;
width: 100%;
bottom: 0;
}
<div class="announce">
This is some announcement
</div>
<div class="header">
<img src="img/logo.png">
</div>
I have added the code as per your reference image. You can adjust the announce and header height optionally.
.announce {
height: 45px;
width: 100%;
position: relative;
}
.header {
background: blue;
width: 100%;
height: 50px;
}
.header img {
max-width: 100%;
max-height: 50px;
}
<div class="announce">
<div class="header">
<img src="https://via.placeholder.com/300x100">
</div>
</div>
You have to give the margin to .header img
.announce {
position: relative;
height: 45px;
width: 100%;
}
.header {
position: absolute;
height: 130px;
background: blue;
width: 100%;
bottom: 0;
}
.header img {
margin: 82px 5px 0;
}
<div class="announce">
<div class="header">
<img src="img/logo.png">
</div>
</div>
i have a div that i want to place below another div.But i think its getting overlapped and is not visible. I'm trying to get a div below the div that split into 2.
<body>
<div class="split left">
<div class="centered">
<img src="assets/img/tms1.png" alt="Avatar woman" />
<h2>our solution</h2>
</div>
</div>
<div class="split right">
<div class="centered">
<img src="assets/img/logo.jpg" alt="Avatar man" />
<h2>our cause</h2>
</div>
</div>
<div class="page2"><img src="assets/img/logo.png" /></div>
the <div class="page2"><img src="assets/img/logo.png" /></div> is not visible.
css:
body {
font-family: sans-serif;
font-size: 30px;
color: white;
height: 100%;
}
.split {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
.left {
left: 0;
background-color: #111;
}
.right {
right: 0;
background-color: white;
color: black;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.centered img {
width: 250px;
border-radius: 50%;
}
css for the div that is not getting displayed.
.page2 {
position: relative;
margin-top: 100%;
top: 100%;
width: 100%;
background-color: #111;
}
https://jsfiddle.net/uxfynrmj/
There are a few issues. Most importantly, you need to remove the position: fixed if you want another element statically positioned below your .split divs.
Most notably I removed the fixed position and absolute positioned child and added a wrapping div width display: flex.
Code snippet below:
html {
scroll-behavior: smooth;
/*height: 100%;*/
}
body {
font-family: sans-serif;
font-size: 30px;
color: white;
height: 100%;
}
.splits {
display: flex;
}
.split {
flex: 1 1 50%;
background: black;
}
.right {
right: 0;
background-color: white;
color: black;
}
.centered {
position: relative;
top: 50%;
transform: translateY(-50%);
text-align: center;
}
.centered img {
width: 100px;
height: 100px;
border-radius: 50%;
}
.page2 {
width: 100%;
background-color: pink;
}
.page2 img {
width: 100%;
background-color: pink;
}
<html>
<head>
<title>THS</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="splits">
<div class="split">
<div class="centered">
<img src="http://lorempixel.com/400/200" alt="Avatar woman" />
<h2>our solution</h2>
</div>
</div>
<div class="split right">
<div class="centered">
<img src="http://lorempixel.com/400/400" alt="Avatar man" />
<h2>our cause</h2>
</div>
</div>
</div>
<div class="page2"><img src="http://lorempixel.com/400/400" /></div>
</body>
</html>
I am trying to center text that is on top of an image but it seems no matter what I do it won't center it
I also attempted using margin 0 auto but that didn't help either.
#search_box {
width: 100%;
height: 450px;
position: relative;
text-align: center;
}
#search_box h1 {
display: inline-block;
width: 50%;
top: 180px;
color: white;
background-color: red;
position: absolute;
}
<div id="search_box">
<img src="images/background_search.jpg" alt="search_box_picture"/>
<h1>SOME TEXT</h1>
</div>
like this?
#search_box {
width: 100%;
height: 450px;
position: relative;
text-align: center;
}
#search_box h1 {
display: block;
width: 50%;
top: 180px;
color: white;
background-color: red;
margin: auto;
}
<div id="search_box">
<h1>SOME TEXT</h1>
<img src="images/background_search.jpg" alt="search_box_picture"/>
</div>
#search_box {
width: 100%;
height: 450px;
position: relative;
text-align: center;
}
#search_box h1 {
display: inline-block;
width: 50%;
top: 180px;
color: white;
background-color: red;
position: absolute;
left:0;
right:0;
margin:0 auto;
}
<div id="search_box">
<img src="images/background_search.jpg" alt="search_box_picture"/>
<h1>SOME TEXT</h1>
</div>
Your image position is center according to parent div. H1 tag is not center aligned. you have to give left space to the absolute tag.
#search_box {
width: 100%;
height: 450px;
position: relative;
text-align: center;
}
#search_box h1 {
display: inline-block;
width: 50%;
top: 180px;
color: white;
background-color: red;
position: absolute;
left:25%;
}
<div id="search_box">
<img src="images/background_search.jpg" alt="search_box_picture"/>
<h1>SOME TEXT</h1>
</div>
Do you want something like this:-
.image {
position:relative;
text-align:center;
}
.text {
left: 0;
position:absolute;
top: 30px;
width: 100%;
}
<div class="image">
<img src="http://davidrhysthomas.co.uk/img/dexter.png" />
<div class="text">
Text of variable length
</div>
</div>
#search_box {
width: 100%;
height: 450px;
position: relative;
text-align: center;
}
#search_box h1 {
display: block;
margin: 0 auto;
width: 50%;
color: white;
background-color: red;
}
<div id="search_box">
<img src="images/background_search.jpg" alt="search_box_picture"/>
<h1>SOME TEXT</h1>
</div>
you want something like this?