my div text gets hidden behind hero image

Question

const topAppBarElement = document.querySelector('#head');
        const topAppBar = new MDCTopAppBar(topAppBarElement);
        const tabBar = new MDCTabBar(document.querySelector('#list'));
        $(function() {
            $('a[href*=#]').on('click', function(e) {
                e.preventDefault();
                $('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top}, 500, 'linear');
            });
        });

a {
    text-decoration: none !important;
}
.font {
    font-family: "Google Sans" !important;
}
.white{
    --mdc-theme-primary: #ffffff;
    height: 100%;
}
.spacer{
    display:inline-block;
    width:50%;
}
.hero {
    font-size: 3em;
    line-height: 0.1;
    text-align: center;
}
.hero-title {
    position: absolute;
    z-index: 1;
    color: #fff;
    top: 40%;
    left: 0;
    right: 0;
    margin: auto;
}
.hero-image {
    background:url(Background.jpg) no-repeat center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
}
.resize{
    margin-top: 150px;
    height: 100px;
    width:250px;
}
.fab{
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translate(-50%, -50%);
    margin: 0 auto;
    --mdc-theme-secondary: #5f37ee;
}




    
        
        
        
        `enter code here`
        
        
         
    
    
        
            
                
                    Edufile
                
                
                    
                    
                        
                            
                                
                                    
                                    
                                    
                                    
                                
                            
                        
                    
                
            
        
        


        
            
                
                
                    Code Different
                    Code makes you free
                
            
        
        
        
            Lorem ipsum dolor sit amet, ne his minim legimus verterem, eos at alterum alienum, mazim munere postea mea no. No option aeterno sed, quas forensibus elaboraret mel ei. Vim tantas euismod detraxit in. Mel libris graecis ei. Ea suas euripidis eos, eos at diam case disputationi, usu dicunt forensibus te. Facer repudiandae est te.

Adipisci voluptaria te mei, his eu vivendum inimicus, ne his quas libris. Sale praesent ex per, mei malis rationibus definitiones cu, ea soluta assentior vim. Cu sed insolens atomorum, et mea fastidii concludaturque. Alia commune his ei, quando everti apeirian pri at, te eos veritus urbanitas. Sumo tincidunt eos at.

Et eos quaestio persecuti, ne affert tacimates disputationi nam, cum justo tincidunt ea. Ad sit doming noluisse laboramus. Cu eum accumsan scaevola, et vix nisl ridens electram. Quo at inermis urbanitas definitiones. Has timeam persius mnesarchum an, ei vis dicit iudico consequat, graecis hendrerit concludaturque sit ea.

Qui ad dolore legimus. Mea ne appetere pertinax, no iuvaret eruditi has, ea dicant libris graeci vel. Id duo unum illud phaedrum, decore eloquentiam duo id. Vim no diam soleat, ex inermis expetendis sea, doctus nusquam fuisset usu an. In integre honestatis usu, mei errem incorrupte suscipiantur at, ut mei affert nonumy eloquentiam. Mel ea simul docendi nominavi.

An iudico mollis corrumpit cum. Temporibus theophrastus ei per, sea iudicabit splendide contentiones cu. Eam ex hinc dolorum, cum at timeam postulant. Vis at nostrum neglegentur, vim et fugit gubergren, instructior reprehendunt pro te. Vel probo habemus neglegentur ex, illud splendide ius id.

Qui et simul nobis aperiri, vel ne case persequeris signiferumque. Est perfecto intellegam signiferumque ad. Elit viris nonumes pro cu. Ad his viris munere, mel ad regione inermis blandit. Verterem indoctum consequat in vim, fuisset placerat eloquentiam vim ne. Sed cu fuisset offendit, saepe facete ei mea.

Pri te wisi delicata percipitur, at scaevola lobortis mea. No mea habeo sadipscing ullamcorper. Ad vel doctus commodo. Vix malis tation contentiones te.

Primis facete cum in, pri vituperata accommodare et. Usu possit consetetur ut. Mentitum intellegebat id sed, id augue offendit appetere quo. Pri quando aeterno laoreet ea, eum alii corpora eu. Id nam hinc vidisse referrentur.

My text of lorem ipsum gets hidden behind the hero image. Can you tell me what can I do?

Bhumi Patel · Accepted Answer

If you want text above and after the text image you can make a small change in your css and the Hero image will be below the text.

please find following css code.

.hero-image {top: auto;}

As you have set top: 0; the image goes top of the page and thus the text gets hidden.

One more answer that if you want text above the image you can use following css code.

#section1 {    clear: both;
    position: absolute;
    top: auto;
    left: 0;
    z-index: 99;
    color: #fff;}

But I dont think so this is your requirement. You can use the first solution.

Note: Please clarify your question more so that I can give you proper answer.

Thank You.

my div text gets hidden behind hero image

Answers (1)

Related Questions