html - How can I responsively place a link over an image that stays in place even though the screens change? -
i attempting overlay link on div background image, link stay in place test screen widths taking mouse , narrowing screen. url http://jandswebsitedesigns.com/test/index.html. can see "a link here" link , stays there. seems me there has better way way set txt-link class.
<style> .fixed { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: contain; background-repeat: no-repeat; } .txt-link { font-size: 25px; color: #ffffff; position: absolute; z-index: 2; top: 55%; left: 45%; } </style> <img class="fixed" src="images/rfyl-mainpagebanner.jpg"> <div class="txt-link"> <div>a link here</div> </div>
add id image image add id linkcontent the div contais link taht want stay on image
add code page
$(window).resize(function(){ $image = $("#image"); $link = $("#linkcontent"); imagetop = $image.offset().top; imageleft = $image.offset().top; imagewidth = $image.width(); imageheight = $image.height(); linkwidth = $link.width()/2; linkheight = $link.height()/2; $link.offset({top:(imagetop+imageheight)/2 - linkheight,left:(imagewidth+imageleft)/2 - linkwidth}); }) just reference page:
<html lang="en"><head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>welcome new life church in corpus christi, tx.</title> <meta name="description" content="at new life church reaching stronger relationship god , others; resulting in being god's expression of love, hope , power in corpus christi, texas!"> <meta name="keywords" content="bible-based teachings, spirit-filled worship, interdenominational church, develop closer relationship our lord, outreach, outreach ministries, missions, water baptisms, sunday morning services, wednesday services, children , kids service, students, college students, experience god, sunday sermons, praise , worship, christian teachings, life groups, mens, womens, marrieds, young adults, singles, city outreach, fellowship, biblical doctrine. "> <meta name="robots" content="index,follow"> <meta name="viewport" content="width=1100"> <meta name="format-detection" content="telephone=no"> <!-- arrow up--> <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" href="css/default.css"> <!--fluid grid--> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/layouts-common.css"> <link rel="stylesheet" media="(max-width: 640px)" href="css/max-640px.css"> <link href="http://fonts.googleapis.com/css?family=lato" rel="stylesheet" type="text/css"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, target-densitydpi=160dpi,"> <style> .fixed { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: contain; background-repeat: no-repeat; position: relative; z-index: 1; } </style> </head> <body <div="" id="main-wrapper"> <img id="image" class="fixed" src="images/rfyl-mainpagebanner.jpg"> <div id="linkcontent" style="font-size: 25px; color: rgb(255, 255, 255); position: absolute; z-index: 2; top: 510px; left: 734px;"> <div>a link here</div> </div> <div class="scroll-top-wrapper"> <span class="scroll-top-inner"> <i class="fa fa-2x fa-chevron-circle-up"></i> </span> </div> <div id="footer"> <div id="footer-content"> <div class="container" style="margin: 0; padding: 35px 0 35px 0;" role="main"> <div class="c1" style="padding-bottom: 25px;"> <div style="float: left; width: 50%;"> <div id="site-map"> <p class="footer-hdr">navigation</p> <a href="index.html">home</a><br> <a href="im-new-here.html">i'm new here</a><br> <a href="sermons.html">sermon archive</a><br> <a href="ministries.html">ministries</a><br> <a href="next-steps.html">next steps</a><br> <a href="learn-more.html">learn more</a><br> <a href="contact.html">contact</a><br> <a href="give.html">give</a><br> </div> </div> <div style="float: left; width: 50%;"> <div id="site-map"> <p class="footer-hdr">about</p> <a href="learn-more.html">core values</a><br> <a href="beliefs.html">beliefs</a><br> <a href="the-team.html">the team</a><br> <a href="missions.html">missions</a><br> </div> </div> </div><!--close c1--> <div class="c2"> <div style="float: left; width: 50%;"> <div id="site-map"> <p class="footer-hdr">connect</p> <a href="kids.html">kids</a><br> <a href="students.html">students</a><br> <a href="adults.html">adults</a><br> <a href="marrieds.html">marrieds</a><br> <a href="mens.html">men's</a><br> <a href="womens.html">women's</a><br> <a href="young-adults.html">young adults</a><br> </div> </div> <div style="float: left; width: 50%;"> <div id="site-map" style="color: #979797; line-height: 150%;"> <p class="footer-hdr">contact info</p> <span style="color: #ffffff;">address</span><br>5801 mcardle rd.<br>corpus christi, tx<br>78412<br><br> <span style="color: #ffffff;">church office</span><br>phone: (361) 992-9921<br>fax: (361) 992-1355<br><br> <span style="color: #ffffff;">office hours</span><br>monday - thursday<br>8:00am - 5:00pm </div> </div> </div><!--close c2--> </div><!-- close container--> </div><!--end footer content--> </div><!--end footer--> <div id="bottom"> <div id="bottom-content"> <div class="s-container" role="main"> <div class="b1"> <div style="padding-bottom: 10px;"> © 2015 new life church. rights reserved. </div> </div> <div class="b2"> <div> site designed , maintained by: <a href="http://jandswebsitedesigns.com/" target="_blank">j & s website designs</a> </div> </div> </div> </div> </div> <div id="top-bar"> <div id="header"> <div id="menu-icon" class="menu-right"></div> </div> <div id="sidebar" style="z-index: 100; position: fixed; top: 0px; right: 0px; bottom: 0px; width: 275px; margin-right: -275px;"><div data-ssbplugin="sub-wrapper" style="width: 100%; height: 100%; overflow: auto;"> <div id="top-sidebar">most recent sermon <iframe style="padding-top: 20px;" width="222" height="125" src="http://www.youtube.com/embed/fhtsqq1pxqk" rel="0" controls="1" showinfo="0" frameborder="0" allowfullscreen=""></iframe> </div> <div id="push-sidebar"> <ul class="list-unstyled"> <li><a href="index.html"><i class="fa fa-fw fa-home"></i>home</a></li> <li><a href="im-new-here.html"><i class="fa fa-fw fa-sign-in"></i>i'm new here</a></li> <li><a href="sermons.html"><i class="fa fa-fw fa-desktop"></i>sermon archive</a></li> <li><a href="ministries.html"><i class="fa fa-fw fa-users"></i>ministries</a></li> <li><a href="next-steps.html"><i class="fa fa-fw fa-compass"></i>next steps</a></li> <li><a href="learn-more.html"><i class="fa fa-fw fa-info-circle"></i>learn more</a></li> <li><a href="contact.html"><i class="fa fa-fw fa-envelope"></i>contact</a></li> <li><a href="give.html"><i class="fa fa-fw fa-heart"></i>give</a></li> </ul> </div> <div id="social"> <a href="https://www.facebook.com/summitcorpus" target="_blank"><i class="fa fa-facebook-square fa-2x"></i></a> <a href="https://twitter.com/summitcorpus" target="_blank"><i class="fa fa-twitter-square fa-2x"></i></a> <a href="https://instagram.com/summitcorpus/" target="_blank"><i class="fa fa-instagram fa-2x"></i></a> </div> </div></div> <!-- side bar menu--> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><style type="text/css"></style> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script> <script src="js/simpleslider/jquery.simplesidebar.min.js"></script> <script> $( '#sidebar' ).simplesidebar({ settings: { opener: '#menu-icon', wrapper: '#main-wrapper' }, sidebar: { align: 'right', width: 275, closinglinks: 'a', style: { zindex: 100 } } }); $(function(){ $(window).resize(function(){ $image = $("#image"); $link = $("#linkcontent"); imagetop = $image.offset().top; imageleft = $image.offset().top; imagewidth = $image.width(); imageheight = $image.height(); linkwidth = $link.width()/2; linkheight = $link.height()/2; $link.offset({top:(imagetop+imageheight)/2 - linkheight,left:(imagewidth+imageleft)/2 - linkwidth}); }) }) </script> <!-- end of side bar stuff--> <!-- image map stuff--> <script src="js/imagemap/ios-orientationchange-fix.min.js"></script> <script src="js/imagemap/jquery.rwdimagemaps.min.js"></script> <script> $(document).ready(function(e) { $('img[usemap]').rwdimagemaps(); }); }); </script> <!--end image map stuff--> <script> $(function() { $(window).on("scroll", function() { if($(window).scrolltop() > 100) { $(".header").addclass("active"); } else { $(".header").removeclass("active"); } }); }); </script> <script> $(function(){ $(document).on( 'scroll', function(){ if ($(window).scrolltop() > 100) { $('.scroll-top-wrapper').addclass('show'); } else { $('.scroll-top-wrapper').removeclass('show'); } }); $('.scroll-top-wrapper').on('click', scrolltotop); }); function scrolltotop() { verticaloffset = typeof(verticaloffset) != 'undefined' ? verticaloffset : 0; element = $('body'); offset = element.offset(); offsettop = offset.top; $('html, body').animate({scrolltop: offsettop}, 500, 'linear'); } </script>