I have a text {L U V B A G} that should appear under the image. I need the html and css for it.
This is how it looks.
enter image description here
{L U V B A G} that should appear under the image.
If you want the text to be on top of your image but at the bottom you can use z-index like the comment says or you can use position absolute on your text.
Code below is adapted from : https://www.w3schools.com/howto/howto_css_image_text.asp
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
text-align: center;
color: white;
}
.centered {
position: absolute;
font-size: 3rem;
top: 90%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="container">
<img src="https://tse3.mm.bing.net/th?id=OIP.qpsTLCVZFHVmKABv5VH7YAHaE8&pid=Api" alt="food" style="width:100%;">
<div class="centered">Best Food 2022</div>
</div>
</body>
</html>
If you don't necessarily want your text on top of the image but rather separated and under your image you can just do two rows and use flexbox.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.flex-container {
display: flex;
flex-direction: column;
text-align: center;
}
</style>
</head>
<body>
<div class="flex-container">
<img src="https://tse3.mm.bing.net/th?id=OIP.qpsTLCVZFHVmKABv5VH7YAHaE8&pid=Api" alt="food" style="width:100%;">
<div>Best Food 2022</div>
</div>
</body>
</html>
Hope that answered your question!
Solution Explained
You'll have one parent div, and inside it, you'll have an image and the text. The text (i.e. <h2>) will have position: absolute with z-index: -1 to make it one layer down the image, and we will need to add position: relative to the parent to stick the <h2> absolute position to this parent.
The top: 15%; right: 50%; transform: translate(50%, -50%); are mainly used to position the absolute <h2> properly, horizontally centered with a little top percentage you can manipulate depending on the image.
Extras like letter-spacing was used to give a proper look & feel like the image you provided.
* {
margin: 0;
padding: 0;
}
.banner {
position: relative;
height: 500px;
text-align: center;
}
.banner h2 {
position: absolute;
top: 15%;
right: 50%;
transform: translate(50%, -50%);
font-size: 10rem;
letter-spacing: 20px;
z-index: -1;
}
.banner img {
height: 100%;
}
<div class="banner">
<h2>LUVBAG</h2>
<img src="https://www.pngall.com/wp-content/uploads/2016/04/Women-Bag-Transparent.png" alt="">
</div>
Related
This question already has an answer here:
Text over image - responsive
(1 answer)
Closed 2 months ago.
I need to put some text over an image in a specific position. I want the text to stay in place & reduce its font-size when the viewport shrinks. Like this:
Text MUST be just above the horizontal green line, and it MUST touch the yellow line on the right.
This is my code:
<style>
#hero img {
width: 100%;
}
#motto {
position: absolute;
bottom: 272px;
right: 360px;
font-size: 59px;
}
</style>
<div id="hero">
<img src="image.jpg">
<div id="motto">This is my long, long text</div>
</div>
The text is correctly positioned iniitally, but then it goes banana when I shrink the viewport
I also tried with font-size: 5vw. The font size seems to shrink, but it doesn't stay in place.
I would like to preserve the <img> and NOT using a background-image, if possible. Anything else would work for me.
Thanks
Someone suggested to take a look at Text over image - responsive . I did (I already did before posting, actually), and it doesn't work the way I need it to (the font-size is fixed, and it doesn't shrink, which is the main problem here). For context: the (adapted) code of that answer is
<style>
img {
display: block;
width: 100%;
}
.thumbnail {
position: relative;
display: inline-block;
}
.caption {
position: absolute;
top: 77%;
left: 66%;
transform: translate( -50%, -50% );
text-align: center;
color: white;
font-weight: bold;
}
</style>
<div id="box-search">
<div class="thumbnail">
<img src="image.jpg" alt="">
<div class="caption">
<p>This is my long, long text</p>
</div>
</div>
</div>
The result is this:
Responsive + fixed position (px) won't work together.
If you want something to be responsive, the positioning must be too. You'll be looking to use % or vw/vh rather than px.
Unfortunately, didn't have your image to work with, so borrowed the second image from your post to demonstrate (so ignore the second "This is my long, long text").
#hero {
position: relative;
}
#hero img {
width: 100%;
}
#motto {
position: absolute;
bottom: 26%;
right: 27%;
font-size: 5vw; /** responsive font-size **/
}
<div id="hero">
<img src="https://i.stack.imgur.com/r0twu.jpg">
<div id="motto">This is my NEW long, long text</div>
</div>
<style>
#hero img {
width: 100%;
}
#motto {
position: relative;
bottom: 272px;
right: 0px;
font-size: 5vw;
}
</style>
<div id="hero">
<img src="https://joshuakosamu.netlify.app/assets/img/jdslk/logos/icons/logo1.png">
<div id="motto">This is my long, long text</div>
</div>
Problem:
First of all, to make the text remain in the desired position relative
to the image's constant changing size calls for some complex css transformation. This is because you are trying to make the text constantly track a position on an image that it knows nothing about nor does it know the ever-changing viewpoint on the host device.
Solution 1:
Why not photoshop the image and write the text on the image. This way your text will always resize with the image, provided your text isn't dynamic
Solution 2:
Edit your css by setting the font-size: 5vw; as you've already stated and setting position: relative; so that your text can move somewhat relative to the <div id="hero"> containing your image.
See code snippet attached:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.container{
position: relative;
text-align: center;
color: white;
}
.txt{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="container">
<img src="lady.webp" alt="" srcset="">
<div class="txt">Full stack developer</div>
</div>
</body>
</html>
My goal here is to create an image slideshow. I'm trying to add the left and right arrows on each side, however my right arrow won't fit in the div. I'm kind of a beginner so bear with me, I was following w3 schools on the slideshow tutorial to make sense of things. I don't want to copy literally everything from w3 schools but like i said i'm a beginner and i'm trying to make sense of things. My next goal is to move on to js and try to solve things there myself.
<html>
<head>
<title>Practice</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<script src="myscript.js"></script>
</head>
<body>
<div class="container">
<div class="regular-img" >
<img id="city" src="NYC.jpg">
</div>
<div class="regular-img" >
<img id="king" src="KING.jpg">
</div>
<a id="prev">❮</a>
<a id="fwd">❯</a>
</div>
</body>
</html>
````
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.container {
background-color: yellow;
height: 65vh;
width: 95vw;
margin: 75px auto;
}
img {
height: 100%;
width: 100%;
object-fit: cover;
}
.regular-img {
display: none;
}
a {
cursor: pointer;
/* color: white;
opacity: 0.7; */
position: absolute;
top: 50%;
font-size: 18px;
user-select: none;
font-weight: bold;
padding: 16px;
margin-top: -22px;
width: auto;
}
#fwd {
right: 0;
}
enter code here
Okay, the fellow developer no need to be afraid just add position: relative to .container and you will be good to go. It is because when you give something a position absolute it will relate to the closest parent element whose position is relative. if none is present it will relate to the HTML element so by adding a relative property to the .container right arrow will relate to its parent container and will stay in the container. Google the difference between position relative and absolute and you will have a better understanding
The solution here is very simple. You have added position: absolute; to the arrows. But you didn't add position: relative; to the parent div.
All you have to do is add this :
.container {
position: relative;
}
This question already has answers here:
How to center a "position: absolute" element
(31 answers)
How can I center an absolutely positioned element in a div?
(37 answers)
Closed 3 years ago.
I am trying to center a image within a container.
According to what I've understood, setting a container's position as "relative" that has a property of text-align set to center should
center block-level elements vertically that has their position
property set to absolute. However, why isn't this the case with my
code?
.first-container {
background-color: yellow;
height: 100%;
position: relative;
text-align: center;
width: 100%;
}
.mountain {
position: absolute;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Playground</title>
</head>
<body>
<div class="first-container">
<img class="mountain" src="images/mountain.png" alt="">
</div>
<div class="second-container">
</div>
<div class="third-container">
</div>
</body>
</html>
I expected that the mountain image would be at the center of the first container that I set the background color to yellow for ease of distinction.
When you use position: absolute on an image in a container with position: relative, your image is at the center of your container. Or, more specifically, the top-left pixel of your image is as the center.
In order to center the image so that the center of the image is in the center of the containing element, you want to set a margin-left of negative half of the image's width. This can be seen in the following, with an image that's 100px wide, with margin-left: -50px:
.first-container {
background-color: yellow;
height: 100%;
position: relative;
text-align: center;
width: 100%;
}
.mountain {
position: absolute;
margin-left: -50px;
}
<div class="first-container">
<img class="mountain" src="https://placehold.it/100" alt="">
</div>
And assuming you set the width on the image itself, you can actually make use of a combination of CSS variables and calc() in order to determine this margin, with width: var(--image-width) and margin-left: calc(var(--image-width) / -2) on the image.
:root {
--image-width: 100px;
}
.first-container {
background-color: yellow;
height: 100%;
position: relative;
text-align: center;
width: 100%;
}
.mountain {
position: absolute;
width: var(--image-width);
margin-left: calc(var(--image-width) / -2);
}
<div class="first-container">
<img class="mountain" src="https://placehold.it/100" alt="">
</div>
your code is right but has a little bit bug here, you need to set height property to some pixels then you can see the image. For example:
.first-container {
background-color: yellow;
height: 400px;
position: relative;
text-align: center;
width: 100%;
border: 1px solid black;
}
added
left: 50%;
transform: translateX(-50%);
to .mountain. Hope this helps you. Thanks
.first-container {
background-color: yellow;
height: 100%;
position: relative;
width: 100%;
}
.mountain {
left: 50%;
transform: translateX(-50%);
position: absolute;
height: 100px;
width: 100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Playground</title>
</head>
<body>
<div class="first-container">
<img class="mountain"src="https://upload.wikimedia.org/wikipedia/commons/4/4e/Artesonraju3.jpg" alt="">
</div>
<div class="second-container">
</div>
<div class="third-container">
</div>
</body>
</html>
I'm currently working on a small little project where i want to use the HTML/CSS checkbox-'hack' to simulate a toggleable image rotation. Problem is, when i add more content to the page and resize it, the images wont stay together at all.
I've tried scaling the images by % and vw/vh without success, as well as scaling the header above the images to make sure they don't 'jump' around when they move.
https://jsfiddle.net/9u3vz5mo/
#cup {
width: 75%;
height: 50vh;
position: relative;
z-index: 1;
}
#mouth {
position: absolute;
width: 7%;
height: 3%;
z-index: 2;
top: 43.5%;
left: 50.5%;
}
<h1>Paragraph Time, please let this work oh lord</h1>
<div class="images">
<img id="cup" src="https://i.imgur.com/SFV05KS.png">
<input type="checkbox" id="checkmouth">
<label for="checkmouth">
<img id="mouth" src="https://i.imgur.com/95acGMs.png">
</label>
</div>
What i hope to achieve is a version where the images scale responsivly to the sites size, and where the rest of the content is shown without having the mouth fly of the designated space on the cup.
Add position: relative to parent element of both images (.images in this case) .
Then adjust position of #mouth
position: absolute elements are positioned relative to first parent element with position: relative
When setting the position to relative, you can add additional positioning attributes (top, bottom, left, right). The relative element is relative to itself. For example, if you set top: 10px the element will move 10px to the top from its normal position.
.images{
position: relative;
}
#cup {
width: 75%;
height: 50vh;
position: relative;
z-index: 1;
}
#mouth {
position: absolute;
width: 7%;
height: 6%;
z-index: 2;
top: 58.5%;
left: 50.5%;
}
#checkmouth {
display: none;
}
input:checked + label > img {
transform: rotateX(180deg);
transition-duration: 0.5s;
}
input:not(:checked) + label > img {
transform: rotateX(0deg);
transition-duration: 0.5s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="./style.css">
<title>Document</title>
</head>
<body>
<h1>Paragraph Time, please let this work oh lord</h1>
<div class="images">
<img id="cup" src="https://i.imgur.com/SFV05KS.png">
<input type="checkbox" id="checkmouth">
<label for="checkmouth">
<img id="mouth" src="https://i.imgur.com/95acGMs.png">
</label>
</div>
</body>
</html>
Always specify 100% width or vw for scaling, and do not set a specified height for images you want to scale correctly. Place them in a div container.
Your problem is setting a specified height .
I am currently centring an image in the horizontal using:
.centeredImage
{
text-align:center;
display:block;
}
<!DOCTYPE html>
<html>
<head>
<title>My Site</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<p class="centeredImage"><img id ="img" src="smallslide1.png"></p>
</body>
</html>
This works fine but I want to centre it vertically too. Not sure how to do about this. I tired to wrap it in a separate div
.centeredVert{
vertical-align: middle }
}
but this didn't do anything. could someone give me some pointers on how to do this please?
You could try the absolute positioning trick on the image itself:
.centeredImage img {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
<p class="centeredImage">
<img src="http://placehold.it/150x100">
</p>
Try this:
#img{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
Here's the jsfiddle.