Positioning a div with text over an image in a way that it

Hey everyone, I've run into a bit of an issue with my project. I'm trying to create a system where text appears over an image, but the problem is that my div is set to absolute position and I can't switch it to relative without causing major complications due to some previous adjustments I made.

#box_1 {
    position: absolute;
}

#box_1 img {
    height: 100%;
    width: 100%;
    position: relative;
}

#box_1 h1 {
    position: absolute;
}

<div id="box_1" class="test_div"><img src="img/scripting.jpg" /><h1>Documentation</h1></div>

Any ideas on how to solve this dilemma? It's crucial for me to ensure that the text remains on top of the image while keeping the DIV in position absolute.

UPDATE: Here's an example of what I'm aiming for: https://css-tricks.com/wp-content/csstricks-uploads/textoverimageexample.jpg

htmlcss

Answer №1

To achieve this effect, you can utilize the CSS property z-index along with setting the text to have a position of absolute.

#box_1 {
    position: absolute;
}

#box_1 img {
    height: 100%;
    width: 100%;
    position: relative;
}

#box_1 h1 {
    position: absolute;
}
#text
{
    z-index:100;
    position:absolute;    
    color:black;
    font-size:24px;
    font-weight:bold;
    bottom: 0;
        left: 0;
        right: 0;
text-align:center;
}
<div id="box_1" class="test_div"><img src="http://www.ew.com/sites/default/files/styles/tout_image_612x380/public/1455655770/homer.jpg?itok=TOtuVefM" /><h1>Documentation</h1>
 <p id="text">
        Hello World! Hello Galaxy !
    </p></div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What steps should I follow to make a sticker adhere to a div?

I'm currently in the process of designing a sticker that attaches to the top of a div, much like this: https://i.sstatic.net/aG329.png <div className="upgrade-premium"> <div className="upgrade-team"> <h1>Prem ...

htmlcsssass

Angular 7: Finding the variance between array elements

How can I subtract the values from the first 3 rows of the table? The formula is TVA Collectée - TVA Déductible - TVA Déductible/immo If the result is positive, it should be displayed in the box labeled TVA à Payer. If it's negative, it should g ...

javascripthtmlangular

"Can you guide me on how to display a React component in a

I have a function that loops through some promises and updates the state like this: }).then((future_data) => { this.setState({future_data: future_data}); console.log(this.state.future_data, 'tsf'); }); This outputs an array o ...

javascripthtmlreactjsrender

Include a floating element within a modal box

I am trying to display some cards within a Bootstrap modal form. Inside the modal, I want the cards to appear in two columns by using the "col-md-5" class. .mycard.col-md-5 card contents However, when I use the "col-md-5" class, it adds a property o ...

htmlcsstwitter-bootstrap-3frontend

Arranging input fields for different languages

I recently inherited a product that has been developed using AngularJS, and I have a query related to localization. Within the HTML code, there are two input fields of type 'input-number' - one for entering the number of days and another for spe ...

htmlangularjslocalizationglobalization

Tips for ensuring a checkbox is ticked before submitting in Bootstrap

I am in the process of creating a form using Bootstrap. I want to ensure that users can only submit the form once they have checked the checkbox.https://i.sstatic.net/piBRA.png <form> <div class="form-group"> <label for=&qu ...

htmlformsbootstrap-5

Customizing the appearance of jQuery accordion components

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js" language="javascript"></script> <script type="text/javascript" src="http://www.compactcourse.com/js/accordionNew.js" language="javascript"></script> < ...

javascriptjqueryhtmlwordpress

Is there a way to remove <font> tags using Javascript designMode?

Currently, I am in the process of developing a WYSIWYG editor as a hobby project. My approach involves utilizing an iframe with design mode enabled and leveraging the execcommand feature in JavaScript to implement the editor functionalities. For instance, ...

javascriptjqueryhtmlcssfonts

Combining two CSS classes to create an "alias"

Currently, I’m utilizing bootstrap for table styling. For instance: <table class="table table-striped main"> However, the table I want to style is dynamically generated by a separate tool that I have no control over, and it already has its own ta ...

htmlcss

The component's div does not respond to the max-width attribute

I'm currently facing an issue with my chart component in a view. I've been trying to reduce its size using max-width property but it doesn't seem to be working. Below are the relevant code snippets: <div id="chart"> < ...

htmlcssvue.js

Creating a text gradient in CSS with a see-through background

Picture for Inspiration Example of HTML Design <div class="Heading"> Raffle <span>EXTRAVAGANZA</span> </div> Tips While not required, adding a gradient would enhance the overall look. ...

htmlcss

The typeface displayed is Rubik Light Font instead of the regular Rubik font

I am currently working on incorporating the Rubik Font into my project: <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> < ...

htmlcssfonts

Floating elements in IE are dropping below a floated input within an unordered list, while in Chrome everything displays correctly

I've been troubleshooting this issue for an hour now with no success. I'm facing a problem in Internet Explorer and can't figure out why. This is a snippet of the HTML code I'm using to display my registration form: <ul id="registe ...

htmlcssinternet-explorercss-float

What could be causing the NoScript tag to malfunction across different web browsers?

I've incorporated the NoScript tag into my JSP pages in the head section. To avoid conflicts with tiles, I made sure not to include multiple NoScript tags. However, I am experiencing issues in Internet Explorer where it doesn't seem to be working ...

javascripthtmljsp

How come the changes in my react component's CSS are not updating in real-time?

After integrating redux into my create-react-app project, I've been struggling to implement a navigator that highlights the active "page link." To achieve this functionality, I am using a combination of react hooks (to maintain the current page state) ...

cssreactjswebpacksassmaterial-ui

Eliminate the hover effect from every element

Is there a method in CSS or Javascript that allows me to eliminate the hover effect on all elements? I am specifically looking for a solution that will disable the hover effect on mobile devices while keeping it intact on desktop. I attempted using pointer ...

javascripthtmlcss

When using HTML select, text alignment may not be centered properly in the Chrome

Recently, I encountered an issue where the text in select options is not centered in Chrome. Interestingly, using text-align: center on the select element works perfectly fine on Firefox, but fails to do so on Chrome. I haven't had the chance to test ...

htmlcss

What is the process for displaying a JSON element within an HTML component in a Bootstrap modal?

My application is developed using CodeIgniter, and now I am looking to manipulate data using AJAX in jQuery. How can I display JSON elements within an HTML element in a Bootstrap modal? Here is the HTML and jQuery code: <td class="center"> < ...

jqueryhtmlajaxtwitter-bootstrapcodeigniter

Gather data from a variety of HTML5 video seminars

I am encountering an issue where I have multiple videos and I want to receive events from each of them. However, I am only able to get the event from one video (as tested in Chrome). Why is this happening? Here is the HTML code: <video id="video1" pre ...

javascriptjqueryhtmlhtml5-video

Nested click jQuery with draggable elements

After taking advice from @amphetamachine in this thread, I was able to successfully manage nested clicks using jQuery. However, the drag feature that was previously functioning perfectly has now stopped working since I implemented the delegates. The main ...

jqueryhtmljquery-ui