html - make item not affected by css, but let it affect other items -
this may seem strange question: have image use header. entire website centered vertical-align: center, header image @ top of screen. know have use either position: relative or position: absolute image, , add vertical-align: top. if try relative, image stays centered, when try absolute, text on page overlaps image. using bootstrap , fullscreen.js project. need put image on top of screen, while pushing other content down. in advance!
<div id="fullpage"> <div class="section"> <img id="header1"src="http://placehold.it/1980x720&text=home" class="img-responsive hidden-print hidden-xs" style="position:absolute; vertical-align:top; top:60px;"> <br /> <br> <h1>test</h1> </div> <div>
#fullpage { vertical-align:center; padding-top: 273px; /*...height of header image...*/ } .section { } #header1 { position:absolute; top: 60px; left: 0; width: 100%; } <div id="fullpage"> <div class="section"> <img id="header1"src="http://placehold.it/1980x720&text=home" class="img-responsive hidden-print hidden-xs"> <br /> <br> <h1>test</h1> </div> <div>
Comments
Post a Comment