CODEWITHSUNDEEP
htmlcssresponsive-designzurb-foundation
cluster1
cluster1

Reputation: 5684

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

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.

Upvotes: 1

Views: 748

Answers (3)

Ronen Cypis
Ronen Cypis

Reputation: 21470

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'...)

Upvotes: 3

ata
ata

Reputation: 3640

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.

Upvotes: 1

AG_
AG_

Reputation: 2699

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>

Upvotes: 2

Related Questions