0

I've got this code (with no header-image visible) so far: 

.wrap {
  margin: 50px auto;
}

html,
body {
  height: 100%;
}

body {
  background-image: url('https://placebear.com/1000/800');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
}

.header {
  background-image: url('https://placebear.com/940/248');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
<div class="wrap">
  <div class="row">
    <div class="medium-12 columns header"></div>
  </div>
</div>

If you give the header-image a fixed size of 248px you can see it appear. Example with visible header-image:

.wrap {
  margin: 50px auto;
}

html,
body {
  height: 100%;
}

body {
  background-image: url('https://placebear.com/1000/800');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
}

.header {
  background-image: url('https://placebear.com/940/248');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  height: 248px;
  border: 3px solid white;
}
<div class="wrap">
  <div class="row">
    <div class="medium-12 columns header"></div>
  </div>
</div>

Is there a way to make it appear without using a fixed height?

Like when using a classic img-tag with just src- and alt-attribute. Then height is read out of the image-file self.

I would like to avoid fixed heights in there because if the image changes then it becomes all wrong.

cluster1
  • 4,968
  • 6
  • 32
  • 49
  • Check out the accepted answer on [how to get div height to auto-adjust to background size](http://stackoverflow.com/q/600743/3162554). If it is fine for you to add the `` to the HTML it will fit your needs. Otherwise you would need javascript to [get the size of a CSS background image](http://stackoverflow.com/q/3098404/3162554) and change the divs height dynamically then. – Marvin Mar 24 '17 at 10:27
  • @Marvin Thanks a lot. :) – cluster1 Mar 24 '17 at 10:31

1 Answers1

2

I think you have to define a height if using background-image. Might be better to use img tag and just put a width of 100%, like so:

.wrap {
  margin: 50px auto;
}

html,
body {
  height: 100%;
}

body {
  background-image: url('https://placebear.com/1000/800');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
}

.header {
  border: 3px solid white;
}

img {
  width: 100%;
}
<div class="wrap">
  <div class="row">
    <div class="medium-12 columns header">
      <img src="https://placebear.com/940/248" alt="Bear Image">
    </div>
  </div>
</div>
mrseanbaines
  • 823
  • 2
  • 12
  • 25