javascript - How can I add link on the background banner? -


how can add link on background banner displayed in background of whole page?

.wrapper {    width: 100%;    display: inline-block;    text-align: center;  }    .banner {    background-position: 50% 0;    background-repeat: no-repeat;  }    .banner {    background-image: url(https://s15.postimg.org/n11a3vr8b/image.jpg);    background-repeat: repeat-y;  }    .wrapper.banner {    background-image: url(https://s10.postimg.org/hyzxs6mmx/image.png);    background-repeat: no-repeat;  }    .banner-link {    position: absolute;    width: 100%;    display: block;    margin: 0 auto;    height: 200px;  }    .page-content {    background-color: white;    width: 300px;    display: inline-block;  }
<div class="banner">    <div class="wrapper banner">    <a href="#" class="banner-link"></a>      <div class="page-content">        lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor        in reprehenderit in <a href="# ">lorem link</a>voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.        <a href="#">lorem link</a>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo        consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. lorem ipsum dolor sit        amet, <a href="#">lorem link</a>consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute        irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <a href="#">lorem link</a>excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>    </div>  </div>

link should on background banner div “banner” , height of banner shouldn’t fixed.

if put absolute div “banner-link” inside div “banner” have put fixed height , not working me.

can done css or should use javascript?

you can set height of link 100% , increase z-index of page-content div. way link stay background:

    .wrapper {   width: 100%;   display: inline-block;   text-align: center; }  .banner {   background-position: 50% 0;   background-repeat: no-repeat; }  .banner {   background-image: url(https://s15.postimg.org/n11a3vr8b/image.jpg);   background-repeat: repeat-y; }  .wrapper.banner {   background-image: url(https://s10.postimg.org/hyzxs6mmx/image.png);   background-repeat: no-repeat; }  .banner-link {   position: absolute;   width: 100%;   display: block;   margin: 0 auto;   height: 100%; }  .page-content {   background-color: white;   width: 300px;   display: inline-block;   z-index:1;   position:relative; }

http://codepen.io/anon/pen/zpgpaa


-

Comments

Post a Comment

Popular posts from this blog

java - Jasper subreport showing only one entry from the JSON data source when embedded in the Title band -

Image
i having issues populating data in subreport in title band of main report. data populated correctly in subreport in detail band of main report. trying find wrong in json query. appreciated. json sample data source (expenses.json) { "expenses": { "date": "8 sep 2016", "accounts": [ { "title": "xyz corp (111)", "accountname": "xyz corp", "accountnumber": "111", "transactions": [ { "date": "21 jun 2016", "name": "gas", "price": "17.50" }, { "date": "12 may 2016", "name": "shopping", "price": "111.99" }, { "date": "30 apr 2016", "name...
Read more

serialization - Convert Any type in scala to Array[Byte] and back -

i have following question: i have variable value in program declared value. i want convert value byte array.. how can serialize byte array , back? found examples related other types such double or int, not any. this should need. it's pretty similar how 1 in java. import java.io.{bytearrayinputstream, bytearrayoutputstream, objectinputstream, objectoutputstream} object serialization extends app { def serialise(value: any): array[byte] = { val stream: bytearrayoutputstream = new bytearrayoutputstream() val oos = new objectoutputstream(stream) oos.writeobject(value) oos.close stream.tobytearray } def deserialise(bytes: array[byte]): = { val ois = new objectinputstream(new bytearrayinputstream(bytes)) val value = ois.readobject ois.close value } println(deserialise(serialise("my test"))) println(deserialise(serialise(list(1)))) println(deserialise(serialise(map(1 -> 2)))) println(deserialise(seri...
Read more

SonarQube Plugin for Jenkins does not find SonarQube Scanner executable -

Image
i trying run sonarqube scanner within jenkins post-build step. however, keep getting error message below: ------------------------------------------------------------------------ sonar analysis failed ------------------------------------------------------------------------ fatal: sonarqube scanner executable not found sonarqube build step 'execute sonarqube scanner' marked build failure from similar questions on stackoverflow read 1 should choose "install automatically" sonarqube scanner, have done. my configurations follows: sonarqube 6.0 jenkins 1.609.3 sonarqube plugin 2.4.4 sonarqube servers sonarqube scanner build-step when config sonarqube scanner in manage jenkins --> global tool configuration --> sonarqube scanner, besides select "install automatically", need add installer. see screenshot here: sonarqube scanner --> add installer
Read more