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

Question

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

Gust van de Wal · Accepted Answer · 2015-10-28T14:22:10.533

4

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

edited Oct 28 '15 at 14:22

answered Oct 28 '15 at 14:15

Gust van de Wal

4,519
18
39

Might need to position it absolutely too. Something like: `background-size: cover; position: absolute; top: 0; bottom: 0; left: 0; right: 0;` – Zachary Forrest Oct 28 '15 at 14:17
`background-size: contain;` may potentially also be an option depending on what you mean by "100%". – BCDeWitt Oct 28 '15 at 14:17
1

@ZacharyForrest, how does that help the background-size? – Gust van de Wal Oct 28 '15 at 14:19
Maybe I misunderstood. My solution just makes the image the full background of the whole page. – Zachary Forrest Oct 28 '15 at 14:20
I tried it and it worked!!! Thanks for the fast reaction!! In the end it was all that simple...... – Jurntje Oct 28 '15 at 14:21

Sahal Sajjad · Answer 2 · 2015-10-28T14:25:10.030

0

add the following style in your css file

 #panel{
    width:100vw;
    height:100vh;
  }

edited Oct 28 '15 at 14:25

answered Oct 28 '15 at 14:23

Sahal Sajjad

195
1
4
18

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

2 Answers2