CSS Show Div Background Image on Top of Other Contained Elements

CSS show div background image on top of other contained elements

I would put an absolutely positioned, z-index: 100; span (or spans) with the background: url("myImageWithRoundedCorners.jpg"); set on it inside the #mainWrapperDivWithBGImage .

Div with background-image overlayed by another div with background-image

You need to have position: absolute for z-index work.

I have a better solution by using flex box:

.banner{position:relative; display:flex;width:375px;height:500px; background:left top url(https://picsum.photos/300/300) no-repeat}

.banner-bg{flex:1 1;background:right top url(https://picsum.photos/200/280) no-repeat}

.banner-title{font-size:30px}

<div class="banner">

   <div class="banner-bg">

       <div style="position:absolute;width:150px;right:10px;top:100px">

         <div class="banner-title">HERE IS LONG TEXT...</div>

         <button>GET IN TOUCH</button>

       </div>

   </div>

</div>

CSS - How to get div on top of background image?

You can apply a negative margin-bottom to the first element.

.background-pic {

  background-image: url(https://www.placecage.com/600/400);

  height: 400px;

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

  margin-bottom: -100px;

}

.content {

  padding-top: 300px;

  background: rgba(10, 150, 10, .4);

}

<div class="background-pic"></div>

<div class="content">Profile content</div>

CSS background image on top of img

You could use a pseudo-element. In this example, the :after pseudo element is absolutely positioned relative to the parent element. It takes the dimensions of the entire parent element, and the size of the parent element is determined by the size of the child img element.

.test {

  display: inline-block;

  position: relative;

}

.test:after {

  content: '';

  position: absolute;

  top: 0; right: 0;

  bottom: 0; left: 0;

  background: url(http://placehold.it/20x20/1) repeat;

}

<div class="test">

    <img src="http://lorempixel.com/200/200">

</div>

Bring Background image above a div

Just something like this; Except in your case replace the css :after with your image on on the loader div as background how you had it.

@keyframes spin { to { transform: rotate(360deg); }}

section {
  position: relative;
  margin: 1rem;
  padding: 1rem;
  border: gray 3px solid;
}

.loader {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0,0,0,.7);
  border: red 1px solid;
}

.loader:after {
  content: '';
  position: absolute;
  height: 3rem;
  width: 3rem;
  border: silver 5px solid;
  border-top: red 5px solid;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

<main>

  <section>
    <h1>test</h1>
    <p>blah blah blah blah blah blah blah</p>
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">
    <div class="loader"></div>
  </section>
  
  <section>
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">
    <div class="loader"></div>
  </section>

</main>

css background-image to continue from a div to another

You could use an absolutely positioned pseudo element to host the background image, though it would require another level of nested elements.

section {
  position: relative;
}

section::before {
  content: "";
  background: url(https://placehold.it/100x100) repeat;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: .5;
}

section > div > div {
  position: relative; /* Pull the content above the ::before */
}

section > div:nth-child(1) {
  background: red;
  height: 200px;
}

section > div:nth-child(2) {
  background: yellow;
  height: 300px;
}

<section>
   <div id="1">
     <div>
       some text
     </div>
   </div>
   <div id="2">
     <div>
       some text
     </div>
   </div>
</section>

How do I position one image on top of another in HTML?

Ok, after some time, here's what I landed on:

.parent {
  position: relative;
  top: 0;
  left: 0;
}
.image1 {
  position: relative;
  top: 0;
  left: 0;
  border: 1px red solid;
}
.image2 {
  position: absolute;
  top: 30px;
  left: 30px;
  border: 1px green solid;
}

<div class="parent">
  <img class="image1" src="https://via.placeholder.com/50" />
  <img class="image2" src="https://via.placeholder.com/100" />
</div>

---

Related Topics