CODEWITHSUNDEEP
cssbackground-image
Guyj91
Guyj91

Reputation: 39

CSS background-image persudo responsive with absolute position

Ok this is really stumping me, probably because i don't understand it 100%. I have the following code to display a responsive background-image on the header:

 .home .site-header-main:before{

    display: block;
    max-width: 100%;
    max-height: 100%;
    background-color: transparent;
    background-image: url('/images/home-menu/home_honey_drip.png');
    background-repeat: no-repeat;
    background-size: 100%;
    padding-top: 35%;

 }

What i want it to do is display the 'home_honey_drip.png' under the menu text and then 'overflow' it over the top of the body content. I have tried adding position: absolute; However the image disappears.

Thank you in advance.

Upvotes: 0

Views: 332

Answers (1)

Kinari
Kinari

Reputation: 178

I think you need to use position relative and move the content of the menu to top.

You can do this using two divs, one with the image and other with the menu content. 

#menu{ 
    top:-100px; 
    position: relative;
    color:white;
}

You can check my jsfiddle. Just add the rest of the css you need to your image.

Upvotes: 1

Related Questions