CSS: How to make a background-image appear within a div without setting a fixed height

Question

I have made the following layout:

html,
body {
  height: 100%;
}

.header {
  height: 120px;
  width: 100%;
  background-image: url(http://lorempixel.com/500/120/);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css" rel="stylesheet" />
<div class="row">
  <div class="columns small-12 header"></div>
</div>

It works because I have used a height-property with a fixed pixel-value.

If one removes that the image disappears:

html,
body {
  height: 100%;
}

.header {
  width: 100%;
  background-image: url(http://lorempixel.com/500/120/);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css" rel="stylesheet" />
<div class="row">
  <div class="columns small-12 header"></div>
</div>

One of the problems with using that fixed height is that responsiveness can't be accomplished.

How can I make the background appear without having to use a fixed height? Or should I fall back to using img-tag instead?

There the height is determined by the image-sizes itself.

Ronen Cypis · Accepted Answer · 2017-04-04 09:51:50Z

3

Currently, your .header doesn't have any content, and thus its height is actually 0px....

To change that, you can either put content into your .header like: text, images... OR give it height via css, either static (in px), or dynamic (via '%', or 'vh'...)

edited Apr 4, 2017 at 9:51

answered Apr 2, 2017 at 7:32

Ronen Cypis

21.5k1 gold badge22 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

AG_ · Accepted Answer · 2017-04-02 07:36:04Z

2

You can use viewport height to make div responsive, in below example 40vh is 40% of viewport height.

html,
body {
  height: 100%;
}

.header {
  height: 40vh;
  width: 100%;
  background-image: url(http://lorempixel.com/500/120/);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css" rel="stylesheet" />
<div class="row">
  <div class="columns small-12 header"></div>
</div>

answered Apr 2, 2017 at 7:36

AG_

2,7193 gold badges23 silver badges34 bronze badges

Comments

ata · Accepted Answer · 2017-04-02 07:46:11Z

You can use one transparent image like below:

html,
body {
  height: 100%;
}

.header {
  width: 100%;
  background-image: url(http://lorempixel.com/500/120/);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.header img {
  width: 100%;
}

<div class="row">
  <div class="columns small-12 header">
    <img src="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAyAAAAGQBAMAAACkCxkHAAAAGFBMVEUAAAD///+TlJWcnp+Ji4yIiouVlZaSk5OelJf9AAAAAXRSTlMAQObYZgAAANVJREFUeF7tzTEVgEAMBbB/HZivDhCBBAQgBf8TLngdEgNJZw6qszMGV1YG4X6OHxYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIA3g1DZGYSVPjMG1R9lOgHLp7M9BAAAAABJRU5ErkJggg=="
    />
  </div>
</div>

You can change window size here: https://jsfiddle.net/gcejf26t/

If you noticed images are showed weird, because they are just like that! nothing to do with CSS (of course transparent image ratio can be equal to your image's ratio).

You can find smaller base64 coded image in comparison with that I've used and also better ratio as you desire.

But why you should do this? I don't know! Use <img> for simplicity.

Collectives™ on Stack Overflow

CSS: How to make a background-image appear within a div without setting a fixed height

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related