I want to display the text {L U V B A G} underneath an image on my website. I require the HTML and CSS code to achieve this effect. Here is a preview of how it should look: enter image description here
The text {L U V B A G} must be positioned below the image.
To position your text on top of your image but at the bottom, you can utilize z-index as suggested in the comment or opt for using position absolute for your text.
This code snippet is modified 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 prefer to have your text separated below the image instead of on top, you can create two rows and apply 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><strong>Best Food 2022<</strong>/div>
</div>
</body>
</html>Trust this response addressed your query!
In order to create this design, you will need a parent DIV element containing an image and text. The text (inside an <h2> tag) will be positioned absolutely with a z-index of -1 to layer it beneath the image. The parent div will also need to have a relative position in order for the absolute positioning of the <h2> to work correctly.
The use of CSS properties like
top: 15%; right: 50%; transform: translate(50%, -50%);<h2> is centered horizontally and can be adjusted vertically as needed based on the image dimensions.
Additionally, styling elements such as letter-spacing are applied to achieve a specific visual aesthetic similar to the provided image.
* {
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>I've been troubleshooting an issue on this website where the header is not centering on the home page, while it appears centered on all other pages. Despite there being several issues with the site, this one is really throwing me off. Here is the link ...
I am currently working on a project that aims to visually represent sorting algorithms, but I have encountered an issue. In order to effectively visualize the sorting process of an algorithm, it is crucial to display every change in the array as the proc ...
Is there a way in Vue.js to dynamically toggle a class on a click event for a div without relying on properties or data? Take a look at this div: <div class="quiz-item" @click="checkAnswer(1)"> Upon clicking this div, I want to add either the clas ...
After successfully implementing the drag and drop functionality, my next challenge is figuring out how to upload and post the file to a URL with specific parameters. Usually, if I had a form available, I could do it like this: <form enctype="multipart ...
Currently, I am dealing with a project that was not originally coded by me and have come across an issue that is proving to be challenging to resolve. Please review the code snippet below: <ion-item detail *ngIf="c.cv" [routerLink]="[&ap ...
I am trying to figure out how to import the width, height, and style properties into a React component. To start, here is an example of a .json document with object properties: "manufacturerData": { "name": "Duesenberg", ...
Is there a way to change the color of a div's scrollbar when hovering over the div without assigning an id to it? I've attempted the following methods so far: div:hover { ::-webkit-scrollbar {color: black} } and div:hover + ::-webkit-scroll ...
I am working on a text input box with auto-complete options displayed below it. I want to enable users to navigate through the options using keyboard arrows and "select" one, causing it to change color. How can I update the text in the input box with the s ...
I am attempting to retrieve the background colors of elements. $(document).ready(function(){ $.each('.log-widget',function(){ console.log($(this).css('backgroundColor')); //$(this).css({'box-shadow':'1px 1px ...
Check out this list of products for an example: I have a function that is triggered on document ready which goes through each item in the list and adjusts the height of a span wrapping the image to ensure uniform spacing. My question is, is it possible f ...
Hello everyone, I have a piece of JavaScript code that generates HTML buttons when the page loads. The button attributes are fetched from a database through an ASP page. Everything is working fine except for displaying the class attribute - it shows as u ...
As I update my old mui styling to utilize the sx attribute, I've noticed the ability to specify styles for different breakpoints using sx = {{ someCssProp: { xs: ..., md: ... and so on. Prior to this, I had been using theme.breakpoints.only for some ...
I have stored some important key-value pairs in local storage. Now I need to retrieve both the keys and values, and then display them by appending the values in a list item (li). Currently, my attempt at this looks like: for (var i = 0; i < localStorag ...
I am attempting to combine these two images to create a map. Here is an illustration of how they should fit together. https://i.sstatic.net/zGZgS.png var testHeightMap = 'x\n' + 'x'; var myCanvas = document.getElementById( ...
I have included all the necessary code, JavaScript function, as well as the Django code. I am attempting to redirect to result.htm from index.html upon clicking the "RUN" button, but the code below is not achieving the desired result. index.html <o ...
Currently, I am working on a project using Tailwind CSS and Next.js. I want to customize the font size of h1 element from 40px to 46px for desktop screens (1440px) and then adjust it to 30px for mobile web (375px). I attempted to add a new property in the ...
I have a complex, dynamic SVG image created using jQuery SVG. I want to create a "popup" area that appears on top of all SVG elements in the canvas. To achieve a modern translucent iOS7 style, I would like to add a blur filter to everything beneath the pop ...
If you are wondering whether it is possible to utilize a variable in the following scenario, the reason for my inquiry is connected to the potential of utilizing an input element to dynamically modify the variable: var str = "pineapples" var cost = { pine ...
Looking to spice up the appearance of the div element that holds the product's image, SKU, and price. Adding a hover effect to the main container causes the child divs to inherit it, resulting in separate hover effects on each child div. Sample HTML ...
Hello everyone, I am trying to retrieve accurate daily temperatures from www.wunderground.com and encountering the 'NoneType' error occasionally. For instance, the code below attempts to fetch the temperature data from March 1 to March 5, 2020. S ...