Responsive image on responsive background image

HTML & CSS
1

I am trying to get an image on a background image both of which should be responsive. I have it working in Chrome and IE10/11 on Windows, and even Safari 8 on iPhone, but in Firefox the background image isn’t displayed at all - the h1 has 0 height.

My CSS:

header {
  width: 100%;
  padding-top: 27.34%;
  background: url(../images/sunset-bg.jpg) no-repeat left top;
  background-size: 100% auto;
}
h1 {
  margin: 0;
}
h1 img {
  position: absolute;
  top: 10px;
  width: 100%;
  max-width: 503px;
  height: auto;
}

My markup:

<header>
  <h1><a href=".">
    <img src="../images/sunset-logo1.png" width="503" height="122" alt="alt text">
</a></h1>
  <div class="skipnav"><a href="#main" accesskey="s">Skip navigation; access key S</a></div>
</header>
2

What is the size of the background container <header> ?

It would be helpful to be able to see images or at least know the image sizes and to know how the page is framed, widths expecially.

Nevertheless, a guess could merit a good laugh :slight_smile:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>template</title>
<!--
https://www.sitepoint.com/community/t/responsive-image-on-responsive-background-image/229017
gandalf458
Jul 2,2016 3:15 AM
-->
    <style type="text/css">
header {
  width: 100%;
  padding-top: 27.34%;
  background: url(http://placehold.it/1000x500/ddeeff) no-repeat left top;
  background-size:100% auto;
  outline:1px solid blue;
  position:relative;
}
h1 {
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  margin: 0;
  outline:1px dashed lime;
}
h1 img {
  width:100%;
  max-width:503px;
  height:auto;
}

    </style>
</head>
<body>

<header>
  <h1>
    <a href=".">
      <img src="http://placehold.it/503x122" width="503" height="122" alt="alt text">
    </a>
  </h1>
  <div class="skipnav"><a href="#main" accesskey="s">Skip navigation; access key S</a></div>
</header>

</body>
</html>
1 Like
3

Hi @ronpat the container is max-width: 1024px. Thanks for your solution. I’ll put it into codepen and play - I probably should have done that first.

1 Like
4

That works fine. However, my container is display: flex which seems to scupper the layout, even though the header isn’t a flex element. Looks like I need a rethink!

.container {
	margin: 0 auto;
	max-width: 1024px;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	-ms-flex-flow: row wrap;
	flex-flow: row wrap;
}
1 Like
5

I don’t know what your set up is but if the header is a direct child of .container then it automatically becomes a flex-item.

We’d need to see your full layout to work out the problem:)

1 Like
6

Thanks Paul. My setup is essentially this:

<div class="container">
  <header></header>
  <div class="left-column"></div>
  <div class="main"></div>
  <div class="right-column"></div>
  <footer></footer>
</div>

So I’m thinking I need to add an inner div and apply the flex to that. Summat like:

<div class="container">
  <header></header>
  <div class="inner">
    <div class="left-column"></div>
    <div class="main"></div>
    <div class="right-column"></div>
  </div>
  <footer></footer>
</div>
7

If container is display:flex then all those direct children (header,left-column,main,right-column,footer) are flex items and will behave as flex items as directed by the rules you have set for the flex container.

It all depends what you are using flex for but there is a bug/behaviour in flexbox where percentage padding and margins are treated as zero.

So the question still comes down to what have you got planned for that layout and why the need for flex? You may be able to use another method instead or indeed just use flex for certain items.

1 Like
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.