Menu
I'm using Foundation 5 to set up a basic page. I'm trying to get a button to change the background-image of a certain div. So far this works, but it only displays a certain area of the image.
This is the code I have so far:
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 the image on a full size within the certain div.
Thanks
265
You need to add a background-size to the div's CSS. Something like
background-size: 100% 100%;
or
background-size: cover;
or
background-size: contain;
You'll have to try each way to see which one you want. Either way, the background will fit neatly into the div
Hope this helps
156
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
