CODEWITHSUNDEEP
htmlcss
nd1990
nd1990

Reputation: 11

absolute positioning with three images

So I have a transparent image I want to place ontop of an image to create a "fade out" effect. I also have a background image. So all up there is three images.

This is my code

<div class="jumbotron">
div class="hero-dashboard">
    <img class="center-block" src="../../img/hero-dashboard.png">
        <div class="fade-bottom">
        </div>
</div>


CSS
.jumbotron{
        background-image: url('../img/hero-bg.jpg');
        background-repeat: no-repeat;
        background-size: cover;
.hero-dashboard img {
                position: absolute;
                z-index: 500;
                height: 30px;
                width: 500px;
            .fade-bottom{
                background-image: url('../img/hero-footer-fade.png');
                position: absolute;
                z-index:10;
                bottom: 70%;
                top: 10%;
                right: 50%;
                width: 100%;
                }
            }
        }

They all have to be inside the "jumbotron" div. Its on the page but it doesn't seem to be listening to the positioning. Can anyone help?

Upvotes: 0

Views: 55

Answers (2)

nd1990
nd1990

Reputation: 11

Thanks for your help. I closed the css tags {} like that because I need them to sit within the jumbotron div class. As they are the children of it. Correct me if I'm wrong but I was under the impression that it was the right way to do it.

Upvotes: 0

Ali Sheikhpour
Ali Sheikhpour

Reputation: 11055

1- The parent div (jumbotron) should have relative position when children are absolute and should have height and width to be visible.

.jumbotron {
            background-image: url('../img/hero-bg.jpg');
            background-repeat: no-repeat;
            background-size: cover;
            position:relative;
            top:0;
            left:0;
            width: 500px;
            height:30px;
            } // correct this closing tag

    .hero-dashboard img {
                    position: absolute;
                    z-index: 500;
                    height: 30px;
                    width: 500px;
                   } //correct this
    .fade-bottom{
                    background-image: url('../img/hero-footer-fade.png');
                    position: absolute;
                    z-index:10;
                    bottom: 70%;
                    top: 10%;
                    right: 50%;
                    width: 100%;
                    }
            //  } remove this
            //   } remove this

2- also correct opening tag < before div class="hero-dashboard">

3- correct the order of opening and closing tgas in your css {}. They seem weird!

Upvotes: 1

Related Questions