I am using Foundation 5 to create a base page. I am trying to get a button to change the background image of a specific div. While this works, it only displays a specific area of the image.
This is the code that I still have:
function cW() { document.getElementById("panel").style.backgroundImage = "url('https://dl.dropboxusercontent.com/u/36821301/csgo%20backgrounds/crimson-web.jpg')"; document.getElementById("panel").backgroundImage.style.maxWidth = "100%"; }
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation 5 testing</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="utf-8" /> <link type="text/css" rel="stylesheet" href="foundation_5.css"> <link type="text/css" rel="stylesheet" href="include/foundation.css"> <script src="include/foundation.min.js"></script> <script src="include/jquery.js"></script> <script src="include/modernizer.js"></script> <script src="foundation_5.js"></script> </head> <body> <div class="row"> <div class="medium-12 columns"> <div id="panel" class="panel"> <h1>Foundation Page</h1> <p>Resize this responsive page to see the effect!</p> <ul class="button-group round"> <li> <button type="button" class="button" value="cW" onclick="cW()">Crimson Web</button> </li> <li> <button type="button" class="button" value="mF" onclick="mF()">Marble Fade</button> </li> <li> <button type="button" class="button" value="d" onclick="d()">Doppler</button> </li> <li> <button type="button" class="button" value="rC" onclick="rC()">Rust Coat</button> </li> <li> <button type="button" class="button" value="dS" onclick="dS()">Damascus Steel</button> </li> <li> <button type="button" class="button" value="s" onclick="hB()">Hyper Beast</button> </li> </ul> </div> </div> </div> </body> </html>
The goal I want to achieve: I want to have a full size image inside a specific div.
thanks
source share