Having trouble with aligning the wrapper div

I am looking to create a div with text inside it. Within that div, I also want another div that matches the same position and size. I have searched on various forums for a solution, but none of them seem to work when even a small detail is different.

Currently, I am unable to see the text on the page. Why is that? I would prefer a solution that does not impact the CSS for the '#container'.

Here is the HTML code:

<div id="container">
    <p>Some text that is messing with me</p>
    <div class="background-img"></div>
</div>

And here is the CSS code:

#container {
    position: fixed;
    left: 10px;
    top: 30px;
    width: 100px;
    height: 50px;
    background: red;
}

p {
   color: blue; 
}

.background-img {
    position: absolute;
    background-size: cover;
    background-repeat: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(http://lorempixel.com/420/255);    
}

For more information, please visit the following link: https://jsfiddle.net/clankill3r/8kaLj2su/

htmlcss

Answer №2

To achieve the desired outcome, it is advisable to avoid using z-index altogether

Revise the structural arrangement of your elements:

<div id="container">
    <div class="background-img"></div>
    <p>Some text to throw me off</p>
</div>

Then, adjust the positioning of your p element to relative:

#container {
    position: fixed;
    left: 10px;
    top: 30px;
    width: 100px;
    height: 50px;
    background: red;
}

p {
   color: blue; 
    position:relative;
}

.background-img {
    position: absolute;
    background: url(http://lorempixel.com/420/255) 50% / cover;
    width: 100%;
    height: 100%;
}
<div id="container">
    <div class="background-img"></div>
    <p>Some text to throw me off</p>
</div>

Answer №3

Utilize z-index to determine the stacking order of elements.

Example in action: (JSFiddle)

#box {
    position: absolute;
    left: 20px;
    top: 40px;
    width: 150px;
    height: 80px;
    background: green;
}

span {
   color: purple; 
   z-index: 2;
   position: relative;
}

.image-background {
    position: absolute;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(http://lorempixel.com/420/255); 
    z-index: 1;
}
<div id="box">
    <span>Some text to test overlaying</span>
    <div class="image-background"></div>
</div>

Answer №4

p {
   color: blue; 
z-index:1;
position:relative;
}

By setting Z-index:1, the text will be brought to the front, and Position is a key factor for z-index to function effectively in most scenarios. It is advisable to avoid using -1 as it may result in any text within that div being concealed as well.

Answer №5

If you're looking to display a background image with text overlay:

https://example.com/sample-code

Here's the code snippet:

#wrapper {
position: fixed;
left: 20px;
top: 40px;
width: 150px;
height: 75px;
background: green;
z-index: 15;
}

p {
color: red;
}

.background-img {
position: relative;
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: url('https://example.com/background-img.jpg');
z-index: -1;    
}

Answer №6

h1 {
    font-size: 24px;
    text-transform: uppercase;
}

Answer №7

Instead of relying on z-index, which can be problematic on older browsers, try a different approach. Rearrange your HTML markup so that the parent container has a position of relative, and both child elements have a position of absolute. This eliminates the need for z-index altogether.

Check out this example: https://jsfiddle.net/4x5nkwgb/

HTML

<div id="container">
    <div class="background-img"></div>
    <p>Some text here</p>
</div>

CSS

#container {
    position: relative;
    left: 10px;
    top: 30px;
    width: 100px;
    height: 50px;
    background: red;
}

p {
    color: blue; 
    position: absolute;
    top: 0;
    left: 0;
    display: block;
}


.background-img {
    position: absolute;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(http://lorempixel.com/420/255);    
}

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

The appearance of the logo varies across various web pages on the site

Isn't it strange that my logo appears pixelated only on the home page, even though I used the same HTML and CSS code for all pages? The Html: <a href="Home.html"><img id="logo" src="../CONTENT/Images/Logo/1Sr2l8а.png" alt="logo"/></ ...

htmlcss

The issue with 'DemoCtrl' defined in Angular JS is that it does not correspond to a valid argument

signup.html <div ng-controller="UniqueCtrl" layout="column" ng-cloak="" class="md-inline-form inputdemoBasicUsage" ng-app="inputBasicDemo"> <md-content md-theme="docs-dark" layout-gt-sm="row" layout-padding=""> <div> <md- ...

javascripthtmlangularjs

Display unique menus for both users and administrators

I have been researching extensively to find a solution to my problem, but I am struggling to make things work properly. Here is the code I currently have: Login script: $submitted_username = ''; if(!empty($_POST)) { ...

phphtmlmysql

What is the best way to populate an HTML array using my AWK script?

In my CGI script written in bash and HTML, I am attempting to display information from multiple CSV files in an HTML array. The following is the script I am using: #!/bin/bash echo "Content-type: text/html" echo "" echo ' <html> <he ...

htmlarraysbashcgi

I'm looking to develop a straightforward panorama application for Windows Phone 7 utilizing PhoneGap/Cordova – any tips on where to start

After searching extensively, I couldn't find any examples of PhoneGap/Cordova-based HTML5 apps for Windows Phone 7 that demonstrate how to create a panorama or pivot style app. These are key features of the OS UI that I want to incorporate into my app ...

jqueryhtmlwindows-phone-7cordova

I can only use innerHTML once in my React application

I am attempting to clear my container div when the user clicks the search button in order to remove all existing search results. However, I am encountering an issue where using innerHTML to clear the container div only works the first time. If a second sea ...

javascripthtmlreactjsreact-nativereact-redux

Having trouble with AngularJS ngRepeat not functioning properly?

Currently, I am utilizing AngularJs to showcase Google maps with markers. Upon clicking a marker, I am aiming to display the details of the clicked marker. Here is the content of my Controller.js: function createMarker(latitude,longitude,name,address,lo ...

javascripthtmlangularjs

How to implement a pop-up dialog box with multiple input boxes using AngularJS?

If you click on the link below: https://material.angularjs.org/latest/demo/dialog You'll notice that the prompt dialog box features only one input field. I'm curious to know if it's possible to customize this using mdDialog to include mult ...

javascripthtmlcssangularjs

Using Flutter to return an HTML response rather than JSON

Experiencing an issue and seeking assistance with this Flutter code as a newcomer to the platform. I am able to successfully retrieve data using https://jsonplaceholder.typicode.com/posts, but encountering errors when trying to access my company's URL ...

htmlflutterdartdio

Generate a unique token through a personalized form

**HTML** <div ref="addCardForm" id="card-element"> <div class="card_digit_text">Credit Card Number <input type="text" id="cardDigit" name="email" placeholder="0000 0000 0000 0000"> </div> ...

htmlvue.jsstripe-paymentsstripe.js

Using dangerouslySetInnerHTML in ReactJS can potentially strip away data attributes

After adding a data-test attribute to the a anchor tag within an HTML string and inserting it using dangerouslySetInnerHTML, I noticed that the data attributes are somehow being stripped out. Is there a way to prevent this from happening? These attribute ...

htmlreactjstypescriptdom

Executing the JavaScript function only a single time is what you're looking

I'm having trouble getting this script to work correctly on my website. It is supposed to trigger an alert when the specified id is in the viewport, but the issue I am encountering is that the alert keeps popping up repeatedly while the id is still vi ...

javascripthtml

Tips for ensuring all my onclick event are clickable in iOS browser

Currently, I am developing a web page using HTML5 and JQuery Mobile. I have encountered an issue where the onclick function does not work on iOS device browsers. Is there a way to change all onclick events to be accessible through tapping instead? This wou ...

javascripthtmljquery-mobile

Is there a way to code a checkbox within a dropdown menu?

I am seeking assistance in making this dynamic I am still learning Laravel and require some guidance on how to program a checkbox within a select dropdown. Here is the HTML form I have: <div class="container w60"> <div class="row pad_y_2 ...

phphtmllaravel-5

What is the best way to target an anchor element that includes a particular word using jquery or css?

I attempted $('a[title="*"]').find('contains("PDF")').css({'background-color':'red'}); Unfortunately, this code is not working as expected. To clarify, I am searching for a specific word in the title. ...

jquerycss

Is there a way to modify the color of the horizontal line within react-native-otp-inputs in the React Native platform?

Is there a way to customize the color of the horizontal line in react-native-otp-inputs for react native? I used react-native-otp-inputs to capture user OTP input, but now I want to change the color of the default black horizontal line to white. You can re ...

javascriptcssreactjsreact-native

Ways to assign the value of an alert to an element

Within this piece of code, my intention is to retrieve the alert value and apply it to an element. Description: The AJAX code I have written checks for values in a database, fetches new values from the database, and then displays these fetched values in a ...

javascriptjqueryhtmlajax

Design a floating text box similar to Gmail's style by incorporating Google's Material Design Lite

I have been utilizing the Material design lite library in an attempt to replicate the Floating text box feature seen in Gmail by Google. Despite not finding any official documentation on this particular component, I decided to experiment with the following ...

htmlcssmaterial-designmaterial-design-lite

JavaScript error message stating that the setAttribute function is null

As a newcomer to JS, I am currently working on creating a task list webpage that allows users to submit projects and create task lists within each project with designated due dates. In order to generate unique ID tags for projects and tasks, I utilized UU ...

javascripthtmlnpmwebpack

Error encountered during the construction of the dojo due to a CSS syntax

I am currently using version 1.9.3 of dojo, and I have encountered an issue with the css file when trying to build dojo using build.bat. The code in my css file is as follows: @import url("TimeDriverCommon.css"); @import url("DialogCommon.css"); @import ...

cssbuilddojo