Background Image areas clickable and responsive
Question
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>LED Control</title> <style> html { background: url(Screen_Shot_20160101_at_181141.png) no-repeat fixed; -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain; background-size: contain; background-size:100% 100%; } </style> </head> <body> Home Control: <form method="get" action="gpio.php"> <br> <input type="submit" name="alloff" value="All Off"> <br> </form> <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post"> <br> ROOM NOA: <br> <button type="submit" name="remote" value="5365060" />Lights On</button> <button type="submit" name="remote" value="5365057" />Lights Off</button> <br> <br> ROOM AMIT: <br> <br> <button type="submit" name="remote" value="10054728" />Lights On</button> <button type="submit" name="remote" value="10054724" />Lights Off</button> <br> Electric Shutters: <br> <br> Living Room: <button type="submit" name="remote_o" value="-g 21195 -n 8 -v" />Open</button> <button type="submit" name="remote_c" value="-g 21195 -n 16 -v" />Close</button> </form> <?php $setmode17 = shell_exec("/usr/local/bin/gpio -g mode 17 out"); if ( isset($_POST['remote']) ) { shell_exec('sudo /home/pi/433Utils/RPi_utils/codesend '.$_POST["remote"].'> /var/tmp/remote.log' ); } else if ( isset($_POST['remote_o']) ) { shell_exec('sudo /home/pi/livolo/transmitters/livolo/livolo '.$_POST["remote_o"].'> /var/tmp/remote_c.log' ); } else if ( isset($_POST['remote_c']) ) { shell_exec('sudo /home/pi/livolo/transmitters/livolo/livolo '.$_POST["remote_c"].'> /var/tmp/remote_c.log' ); } else if(isset($_GET['alloff'])){ shell_exec('sudo /home/pi/433Utils/RPi_utils/codesend 10054724'); shell_exec('sudo /home/pi/433Utils/RPi_utils/codesend 5365057'); echo "All is off"; } ?> </body> </html>
I have an HTML page having a responsive background image. I want to make clickable areas (2 areas) on my background image. It must be on the same spot as the 2 blue boxes. I want it to be responsive, mean the areas should be sticky to the blue boxes. enter image description here
1 answers
solution1
0 ACCPTED 2016-04-04 17:29:25
Since your background is responsive, you could use elements that have percentage-based dimensions and positioning.
html { background: url(http://i.stack.imgur.com/lC4x1.jpg) no-repeat fixed; -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain; background-size: contain; background-size: 100% 100%; } .bluebox { position: absolute; top: 65%; border: 3px solid red; height: 12%; width: 8%; left: 40%; } #bluebox2 { left: 50.5%; }
<div id="bluebox1" class="bluebox"></div> <div id="bluebox2" class="bluebox"></div>
jsFiddle: https://jsfiddle.net/azizn/5gsj9owv/
You can modify the values to match your exact spot, you may also use the CSS transform property if you want a pixel-perfect match.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.