Jurntje Jurntje - 1 year ago 55
HTML Question

Foundation 5: Styling my img size to the be 100% of a div

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 =
document.getElementById("panel").backgroundImage.style.maxWidth = "100%";

<!DOCTYPE html>
<html lang="en">

<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>


<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">
<button type="button" class="button" value="cW" onclick="cW()">Crimson Web</button>
<button type="button" class="button" value="mF" onclick="mF()">Marble Fade</button>
<button type="button" class="button" value="d" onclick="d()">Doppler</button>
<button type="button" class="button" value="rC" onclick="rC()">Rust Coat</button>
<button type="button" class="button" value="dS" onclick="dS()">Damascus Steel</button>
<button type="button" class="button" value="s" onclick="hB()">Hyper Beast</button>


The goal I want to achieve:
I want to have the image on a full size within the certain div.


Answer Source

You need to add a background-size to the div's CSS. Something like

background-size: 100% 100%;


background-size: cover;


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