positioning three background images in the same place

I have three images img1.png, img2.png, img3.png with heights 600px,400px and 200px respectively. My goal is to position these images in a specific order: img1.png in the back, img2.png in the middle, and img3.png in the front. I attempted to use CSS position attributes without success. I have placed the images as backgrounds for three different divs:

<div id="clouds1"></div>
<div id="clouds2"></div>
<div id="clouds3"></div>

<style>

#clouds1
{
    background:url('images/img1.png');
    height:600px;
    position:absolute;
    z-index:1;
}

#clouds2
{
   background:url('images/img2.png');
   height:400px;
   position:relative;
   z-index:8;

}

#clouds3
{
   background:url('images/img3.png');
   height:200px;
   position:relative;
   z-index:99;
}

</style>

Can someone provide guidance on how to achieve this using the CSS position attribute or another method? Your assistance is greatly appreciated. Thank you.

Answer №1

Here is a solution that might help you achieve what you're looking for. Simply include position:absolute & z-index:

div#a {background-color:green;width:50px;height:10px;position:absolute;z-index:3;}
div#b {background-color:red;width:50px;height:30px;position:absolute;z-index:2;}
div#c {background-color:black;width:50px;height:50px;position:absolute;z-index:1;}
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>

Adjust the z-index values to control the stacking order of the div elements, determining which one appears in front, in the middle, and so on.

For those unfamiliar with z-index, consider this example where the black div is set to z-index:3. Although they are all at the same position, the black div will be displayed in front of the others:

div#a {background-color:green;width:50px;height:10px;position:absolute;z-index:2;}
div#b {background-color:red;width:50px;height:30px;position:absolute;z-index:1;}
div#c {background-color:black;width:50px;height:50px;position:absolute;z-index:3;}
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>

Also noted by @gibberish, ensure that the outer container holding the 3 div elements has a positioning value of either absolute or relative. By default, HTML elements have a static position unless otherwise specified.

Answer №2

If you want to position three DIVs on the same spot, you can set their positions to absolute and adjust the top & left values accordingly:

#clouds1, #clouds2, #clouds3 {
    position: absolute;
    top: 0px; <!-- modify as needed -->
    left: 0px; <!-- modify as needed -->
}

Alternatively, if you prefer to use just one DIV, you can assign multiple background images to that single DIV like this:

.three_backgrounds {
  background: url('http://images.clipartpanda.com/free-clipart-flowers-ncByRqpcA.png') top left no-repeat, url('http://worldartsme.com/images/pink-flower-vector-clipart-1.jpg') top left no-repeat, url('http://www.clker.com/cliparts/t/G/0/p/H/d/flower-hi.png') top left no-repeat;
  background-size: 100px 100px, 50px 50px, 70px 70px;
  height: 400px;
}
<div class="three_backgrounds">
</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

Struggling to effectively customize a bootstrap theme

After incorporating a custom .css file from an internet theme that overrides some bootstrap properties, I noticed that it works in certain scenarios. However, when attempting to modify the primary color in the :root{} section of the styles.css file, the ch ...

Tips for achieving fluid and seamless page scrolling on a website

Looking to add smooth scrolling to my website but unsure of the best method - whether to override normal mouse scrolling or pursue another approach. I'm aiming for a similar effect as seen here. Give it a try and scroll through the page. ...

Replace the icon in Material UI Stepper for steps that have errors

I am utilizing Material UI's Stepper component to display a checklist in this manner. The image below is from their documentation. https://i.sstatic.net/KfUos.png While attempting to add an error state to the checklist, I discovered a prop called er ...

What is the best way to stop the browser from automatically redirecting to another page after submitting a form?

I am using an AJAX call to a method that returns JSON data. How can I retrieve and read the JSON response without being redirected to a new empty page? [HttpPost] public JsonResult Test() { return Json("JSON return test", JsonRequestBehavior.AllowGe ...

When clicked, activate a different overlay div

I have an image that I want to enhance with some effects. I was able to add a hover overlay using a div. Now, I am looking to add an onclick event to change to another overlay div. Below is the code I have so far, or you can view the CodePen Here <d ...

Retrieving data from a C# datatable in JSON format and presenting it in a jQuery datatable

Recently, I've been diving into Jquery Datatable and trying to work with it using a JSON string. However, despite my efforts over the past couple of days, I haven't been able to get the desired output. Here's a snippet of my HTML : <bo ...

Status of Google Sheets sidebar being opened or closed

I am currently seeking a method to monitor the status of the sidebar within Google Sheets. My understanding is that I can ascertain which sidebar HTML has been accessed by establishing a global variable before the HTML content is presented. Given that onl ...

Guide to accessing HTML elements and saving them in a JSON formatted text using JavaScript

If you have an html form with labels, select boxes, and radio buttons, you can use javascript to store the child elements of that form in a json string format. Here is an example: { "label": { "content": "This is a label" }, "textbox" ...

How can ListSubheader in Material-UI be customized to match the style of iOS UITableView?

Here is the current appearance of my ListSubheader. https://i.stack.imgur.com/HAzTA.png Currently, it is just aligned to the left. However, the default header view in UITableView on iOS looks like this: https://i.stack.imgur.com/F9Amv.png It features ...

When using the background-blend-mode property, transition-duration is not taken into account

Try hovering over the top left h1 element in this code example You'll notice that it smoothly changes the h1 element to a shade of blue in just 2 seconds. However, the transition doesn't affect the blend mode of the backgrounds. Even though the ...

There seems to be a glitch with the email validation process

The validation issue in the email field is causing the is-valid effect to appear incorrectly. Although the email format is not valid (not 'gmail.com' format), a green outline and checkmark are displayed. How can I adjust this to work properly lik ...

When hovering over an element, I must utilize a selector and reference a variable that was defined outside of the hover state in order to

Explaining this code may be a challenge, but I'll give it my best shot. Here's the code snippet: $('#navibar a').hover(function(){ var position = $(this).position(); var width = $(this).width(); $('#underliner'). ...

Tables lacking borders where rowspans are present

I'm currently using Firefox and have the following code snippet: html, body { width: 100%; height: 100%; } * { box-sizing: border-box; } body { padding-left: 20px; padding-right: 20px; } .visitentabelle { border: 2px solid black; ...

Retrieve or extract information stored in a JSON array as a text string

After receiving a JSON Response, it contains: [{"name":"value 1"}] In my html.twig file, I am attempting to extract this value using the following code snippet: // extracting route parameter in JavaScript var for slug and confChecked $ ...

Utilizing Jquery for event handling in dynamically created table rows in a datatable

I am attempting to incorporate a function call "onblur" where I can input a new value in the TD cell. What I am looking to achieve is for the new value to be passed by the function to another JQuery script. Unfortunately, the datatable does not seem to rec ...

Tips for implementing bootstraps x-editable within table rows

I am interested in utilizing the X-editable plugin from Bootstrap. I have table data being retrieved on the server side and I would like to be able to edit it inline. It seems that X-editable is designed to work with IDs. Is there a way to handle multiple ...

Firing a jQuery Event Upon the Loading of a New Page in an iFrame

I am attempting to create a function on the parent element that will activate when an iframe changes its page (most likely due to a user clicking a link). Here is the HTML code: <iframe name="posts" id="posts" src="edit.php"> And here is the JavaS ...

Is it possible to utilize the existing class elements as an array identifier?

Can you leverage a string from an element's CSS class as an array name? I am searching for a more efficient way to store default animations that may expand gradually to encompass more options in the array. Example JavaScript (jQuery): - var col ...

When utilizing AJAX, certain web pages may contain a querystring

Encountering an issue with ajax when using query strings. Data can be successfully sent when the page does not have any query string and Info.aspx/Save works perfectly fine. However, when I include query strings and post the same data, it results in a HTTP ...

What is the process for closing the side menu by clicking on the dark area?

I created a basic side navigation menu. When you resize the window to a smaller size, a red square will appear. If you click on this red square, the menu will open. The menu opens correctly, but I want it to close when I click on the dark area instead of ...