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

Popular posts from this blog

toolbar - How to add link to user registration inside toobar in admin joomla 3 custom component -

linux - disk space limitation when creating war file -

How to provide Authorization & Authentication using Asp.net, C#? -