CODEWITHSUNDEEP
cssimagetext
Kyoya
Kyoya

Reputation: 25

Display Image over another Image

how to display image and text over another image, it looks like this site http://anilist.co/anime/20802/DigimonAdventuretri.

Upvotes: 2

Views: 193

Answers (3)

CoqPwner
CoqPwner

Reputation: 964

In your example, it feels like a container DIV with a background image, with a nested image inside said DIV.

to get a similar result for example :

HTML:

 <div id="bg">
      <div id="transparentContent">
          <img src="imagePath" />
      </div>
 </div>

CSS: 

#bg {
    background-image: url("imagePath");
    background-size: cover;
    background-repeat: no-repeat;
}

#transparentContent {
    background-color: rgba(0,0,0,0.5);
    color: white;
}

The transparent content DIV is used to create the blackened background over the image.

There are of course, other ways to achieve similar results.

Upvotes: 1

Alex
Alex

Reputation: 829

heres a little demo

header {
    position:relative;
    width:100%;
    height:400px;
    background:url('http://91ef69bade70f992a001-b6054e05bb416c4c4b6f3b0ef3e0f71d.r93.cf3.rackcdn.com/deep-forest-1009475.jpg')no-repeat center;
    background-size:cover;
}

.img {
    position:relative;
    float:left;
    margin:20px;
    width:200px;
    height:calc( 100% - 40px );
    background:url('http://91ef69bade70f992a001-b6054e05bb416c4c4b6f3b0ef3e0f71d.r93.cf3.rackcdn.com/silhouetted-figure-and-tree-1008861.jpg')no-repeat center;
    background-size:cover;
}

.description {
    position:relative;
    float:left;
    margin:20px 0;
    width:calc( 100% - 240px);
}
<header>
    <div class="img"></div>
    <div class="description">
        <h2>Lorem Ipsum</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor..</p>
    </div>
</header>
<section>
    <h1>Actual text</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
</section>

Upvotes: 1

Rahul Tripathi
Rahul Tripathi

Reputation: 172428

Hint is to use the position: relative with z-index. Basically z-index will put the elemets on top of each other when you will render it.

Upvotes: 2

Related Questions