I am a beginner in coding and I want to place the text in front of the picture.
I am using Komodo. Here is my Code:
Based on your tags, here is a CSS solution. Add this between your <head></head> tags.
<style>
#contenu::after {
content: "words";
}
</style>
This should be it, please leave a comment if you need more help.
This will position text over image and put it in center.
<div>
<img src="">
<h1>Text</h1> <!-- This will positon text over image -->
</div>
div {
position: relative;
text-align: center;
}
image {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
I have a solution for you here, but it can be implemented in many different ways.
.bandeau {
position: relative;
text-align: center;
}
h1 {
position: absolute;
top: 10%;
left: 20%;
color: red;
}
h2 {
position: absolute;
top: 25%;
left: 20%;
color: red;
}
h3 {
position: absolute;
top: 40%;
left: 20%;
color: red;
}
<div id="bandeau">
<div id="contenu">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg" alt="photo d'aceuil">
<h1>Pour ma nadette</h1>
<h2>Mon amoureuse</h2>
<h3>Je t'aime</h3>
</div>
</div>
I hope I could help you
Related
This question already has answers here:
Absolute position is not working
(6 answers)
Closed 10 months ago.
Trying to center text over image in HTML, but my method keeps pushing the text to the very beginning of the page at the top. My method is below...
.info {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.map-p {
font-size: 27pt;
text-align: center;
color: black;
position: relative;
z-index: 1;
}
<div class="map-section">
<img id="map" src="https://img.freepik.com/free-photo/europe-map-pins-travel-your-planning-trip_255544-1467.jpg?w=2000" alt="Image cannot be displayed" />
<div class="info">
<p class="map-p">We have locations all over!</p>
</div>
</div>
because .map-section needs to have position: relative
long answer:
in order for position absolute to use the reference of the parent. the parent needs to have position: relative
so adding
.map-section: { position: relative };
and fix the transform, should be
transform: translate(50%, -50%);
will get what you want
Two things:
1.) Set position: relative to the parent element (.map-section) to make it the reference for the absolutely positioned element.
2.) (optionally?) Limit the size of your image to its container's width and add height: auto to keep the proportion:
#map {
width: 100%;
height: auto;
}
.map-section {
position: relative;
}
.info {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.map-p {
font-size: 27pt;
text-align: center;
color: black;
position: relative;
z-index: 1;
}
<div class="map-section">
<img id="map" src="https://img.freepik.com/free-photo/europe-map-pins-travel-your-planning-trip_255544-1467.jpg?w=2000" alt="Image cannot be displayed" />
<div class="info">
<p class="map-p">We have locations all over!</p>
</div>
</div>
It should be like that
For more info : https://www.w3schools.com/css/css_positioning.asp
.info {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.map-p {
font-size: 27pt;
color: black;
position: relative;
z-index: 1;
}
.map-section{
position: relative;
}
I built a simple countdown timer in HTML and now I am looking to put all the text on top of an image. So the image is in the background and the text on top of it.
It's an image of a mac screen and I want text to be inside of the screen if that makes sense :)
Code:
.time-to {
text-align: center;
font-family: Bangers;
color: white;
font-size: 35px;
letter-spacing: 2px;
}
.time-to span {
display: block;
font-size: 80px;
color: #D9D900;
}
.macPic {
position: absolute;
}
<div class="macPic" class="">
<img src="Images/mac.png" class="img-responsive" alt="Responsive image">
<div class='time-to'>
Slutar Midnatt Söndag :
<span countdown='' date='December 3, 2017 12:00:00'> </span>
</div>
</div>
.time-to {
text-align: center;
font-family: Bangers;
color: white;
font-size: 35px;
letter-spacing: 2px;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.time-to span {
display: block;
font-size: 80px;
color: #D9D900;
}
.macPic {
position: absolute;
}
<div class="macPic" class="">
<img src="https://www.w3schools.com/howto/img_fjords_wide.jpg" class="img-responsive" alt="Responsive image">
<div class="centered">
Slutar Midnatt Söndag :
<span countdown='' date='December 3, 2017 12:00:00'> </span>
</div>
</div>
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
Because the image has a z-index of -1, it will be placed behind the text.
you could use background image, correct me if I misunderstood your question
<div class="macPic" class="background-image: url("Images/mac.png");">
<div class='time-to'>
Slutar Midnatt Söndag :
<span countdown='' date='December 3, 2017 12:00:00'> </span>
</div>
</div>
Two possible solutions:
(1) Set your image as background image for div class="macPic":
.macPic {
background-image:url('Images/mac.png');
}
(2) Use positioning as explained here to let the text float on top of the image:
.macPic { position:relative; }
.time-to { position: absolute; }
.img-responsive { position: absolute; }
Do as follow
.macPic {
position: relative;
}
.time-to {
position: absolute;
/* You can replace * with any value that you like */
top: *px;
bottom: *px;
right: *px;
left: *px;
}
Try this CSS...
.time-to{
position:absolute;
top:50%;
left:10%;
}
Put mac.png image into css folder and add this code to your external file
.macPic { background-image:url('Images/mac.png'); }
I have a <div> which includes two <img>, one is the close button, the other one is a roommap. However, the roommap size is always different, so putting the close button in an absolute position doesnt seem to work.
Does anybody has an idea how I could achieve that the close button is based on the roommap size and always in top right corner? Also, the whole <div> is a popup which is centered in the middle of the screen.
.cont2 {
position: relative;
}
.cont2 .img2 {
position: absolute;
margin-top: 10%;
right: 10%;
z-index: 2;
}
.cont2 .img1 {
position: absolute;
margin-top: 15%;
left: 50%;
z-index: 1;
border: 4px solid black;
border-radius: 5px;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-transform: translateX(-50%);
}
<div class="cont2" id="popImg">
<img class="img2" width="40px" id="closebutton" src="https://placehold.it/40x40&text=Button">
<img class="img1" onclick="point_it(event)" id="roomchoose" src="https://placehold.it/150x150&text=Image" />
</div>
Ok, your issue is you need a div to just hold the image and be the same size so you can position your cross relative to the image size.
Try the following (I have added an extra image-holder div but if you don't want this, just make your main cont2 div inline-block):
.cont2 {
position: relative;
}
.cont2 .img2 {
position: absolute;
top: 10%;
right: 10%;
z-index: 2;
border:1px solid red;
}
.cont2 .image-holder {
display: inline-block;
position: absolute;
margin-top: 15%;
left: 50%;
border: 4px solid black;
border-radius: 5px;
transform: translateX(-50%);
}
.cont2 .image-holder img {
display: block
}
<div class="cont2" id="popImg">
<div class="image-holder">
<img class="img2" width="40px" id="closebutton" src="https://placehold.it/40x40&text=Button">
<img class="img1" onclick="point_it(event)" id="roomchoose" src="https://placehold.it/150x150&text=Image" />
</div>
</div>
I had to refactor your css a little but here is a working version:
#popImg {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
}
img {
position: absolute;
}
#closebutton {
right: 0;
top: 0;
z-index: 2;
cursor: pointer;
}
#roomchoose {
width: 100%;
height: auto;
z-index: 1;
}
<div class="cont2" id="popImg">
<img class="img2" id="closebutton" src="http://placehold.it/50x40/ff0000/ffffff">
<img class="img1" onclick="point_it(event)" id="roomchoose" src="http://placehold.it/500x400" />
</div>
The main changes are that the #popImg is now the element that is being offset to the centre. This was the main cause of your problems before, because the #closebutton had no relationship with the #roomchoose.
Now you use block wrapper, it has width 100%. Use inline-block wrapper for your image. And don't use position absolute for main image, it doesn't make width for parent div:
.cont2 {
position: relative;
text-align:center;
}
.cont2 .img2 {
position: absolute;
margin-top: 10%;
right: 10%;
z-index: 2;
}
.cont2 .img1 {
position: relative;
margin-top: 15%;
z-index: 1;
border: 4px solid black;
border-radius: 5px;
}
.wrapper{
display:inline-block;
position:relative;
}
<div class="cont2" id="popImg">
<span class="wrapper">
<img class="img2" width="40px" id="closebutton" src="https://placehold.it/40x40&text=Button">
<img class="img1" onclick="point_it(event)" id="roomchoose" src="https://placehold.it/150x150&text=Image" />
</span>
</div>
I've gone through a lot of the resolved questions with a similar title but nothing I try seems to work.
I want the ava.png image to redirect to another page, but on hover I want a :before image (ava_background_hoover.png) to show up.
I may be going about it all wrong, but this is what I have so far:
#slide1 {
position: relative;
margin-left: 147px;
margin-top: 0px;
z-index: 100;
}
#slide1:hover {
position: relative;
}
#slide1:hover:before {
content: url("https://www.upload.ee/image/6050956/ava_background_hoover.png");
display: block;
position: absolute;
z-index: -1;
}
#slide2 {
opacity: 1;
position: relative;
z-index: 2;
margin-left: 7px;
margin-top: 0px;
}
#slide3 {
z-index: -1;
position: absolute;
}
<section id="header">
<div class="inner">
<img id="slide1" src="https://www.upload.ee/image/6050955/ava.png"/><img id="slide2" src="https://www.upload.ee/image/6050954/arrow.png" width="140" height="160" alt=""/>
</div>
</section>
Fiddle
You can set #slide1:before's content as the default image. Then, on :hover, change the content attribute to the hover image.
If you do so, you need to change the img to a div (or span, just not an img).
#slide1 {
position: relative;
margin-left: 147px;
margin-top: 0px;
z-index: 100;
display:inline-block;
}
#slide1:before {
content: url("https://www.upload.ee/image/6050955/ava.png");
}
#slide1:hover {
position: relative;
}
#slide1:hover:after {
content: url("https://www.upload.ee/image/6050956/ava_background_hoover.png");
display: block;
position: absolute;
z-index: -1;
}
#slide2 {
opacity: 1;
position: relative;
z-index: 2;
margin-left: 7px;
margin-top: 0px;
}
#slide3 {
z-index: -1;
position: absolute;
}
<section id="header">
<div class="inner">
<a id="slide1" href="http://google.com" target="_blank"></a>
<img id="slide2" src="https://www.upload.ee/image/6050954/arrow.png" width="140" height="160" alt=""/>
</div>
</section>
Working demo including the link: http://output.jsbin.com/cudimos
the :before and :after pseudo-elements are used to insert content before, or after, the content of an element . img doesn't have content. so you can't use pseudo-elements on img .
instead, you should use <div> with ids #slide1 and #slide2 in which you put img or use background-img on that divs , you choose.
i made a simple example below. click to show snippet. let me know if it helps
P.S. you can position the :before how you want. i just guessed how you wanted it
#slide1,#slide2 { display:inline-block}
#slide1 {
position: relative;
margin-left: 147px;
margin-top: 0px;
z-index: 100;
}
#slide1:hover {
position: relative;
}
#slide1:hover:before {
content: url("https://www.upload.ee/image/6050956/ava_background_hoover.png");
display: block;
position: absolute;
z-index: 1;
right: -150%;
bottom: -150%;
}
<section id="header">
<div class="inner">
<div id="slide1">
<img src="https://www.upload.ee/image/6050955/ava.png"/>
</div>
<div id="slide2">
<img src="https://www.upload.ee/image/6050954/arrow.png" width="140" height="160" alt=""/>
</div>
</div>
</section>
I am trying to make a login form. So far I have managed to hardcode it but once I need to for ex. move one of the wrappers then I got to change every element position in that wrapper. How can I do it so that when moving icon, BG field and text, I only got to change position from one place?
HTML code:
<div id="user-wrapper">
<img id="userfield" src="images/fieldBG.png" alt="Username">
<img id="usericon" src="images/userIcon.png" alt="Username">
<p id="username">
Username
</p>
</div>
<div id="pw-wrapper">
<img id="pwfield" src="images/fieldBG.png" alt="Password">
<img id="pwicon" src="images/pwIcon.png" alt="Password">
<p id="pw">
Password
</p>
</div>
<div id="login-wrapper">
<img id="loginbtn" src="images/loginBtn.png" alt="Login">
<p><a id="login" href="#">
Login
</p>
</div>
CSS code:
#user-wrapper {
position: relative;
top: 100px;
width:1760px;
}
#usericon {
position: absolute;
top: 10px;
left: 740px;
}
#user-wrapper p {
position: absolute;
top: 14px;
left: 840px;
}
#pw-wrapper {
position: relative;
top: 120px;
width:1760px;
}
#pwicon {
position: absolute;
top: 10px;
left: 740px;
}
#pw-wrapper p {
position: absolute;
top: 14px;
left: 840px;
}
#login-wrapper {
position: relative;
top: 140px;
width: 1940px;
}
#login-wrapper p {
position: absolute;
top: 12px;
left: 950px;
}
The whole thing should look like this (but should be editable/positioned with an ease):
Thank You!
Only use
#usericon {
position: absolute;
top: 10px;
float: right;
left: 740px;
}
Okey, I managed to fix it myself.
Instead of width in the wrapper, I had to use left.
For ex.
#user-wrapper {
position:relative;
top:100px;
left:0px;
}
Now I can just only change wrapper parameters top/left and it moves all items inside the wrapper div.