0

I have mockups from a designer that I want to share with my colleagues for approval and I want the image to fill the browser's width of users accessing but allow scrolling like a website would.

I have tried to do this by using the following CSS code:

<!DOCTYPE html>
<html>
<head>
<style>
body {
    margin:0;
}
html, body, .image {
    position:relative;
    width:100%;
    background-image:url('05.jpg');
    background-size:cover;
}
</style>
</head>
<body>
<div class='image'></div>
</body>
</html>

The result is an image that fills the width 100% but does not allow scrolling, keeping the rest of the image hidden. How can I fill only the width of the page, but allow scrolling through the rest of the image?

I found this similar question but couldn't get it to work using the code shared.

Ralph
  • 418
  • 8
  • 18

1 Answers1

1

Why don't you just use the image as a regular image like this:

body {
  margin: 0;
}

.x > img {
  width: 100%;
  height: auto;
}
<body>
  <div class='x'>
    <img src="http://placehold.it/2000x2500/fc0">
  </div>
</body>

Here's a codepen with the same code (snippet currently displays an error message "Service unavailable"):

https://codepen.io/anon/pen/XgVBKg

Johannes
  • 64,305
  • 18
  • 73
  • 130
  • Hi, thanks for responding. [Doing what you suggest](http://dl.n3rve.com/econnect-mockups/) loads a scrollable background image as desired but doesn't fit the 100% width. – Ralph Jun 29 '17 at 00:16
  • You didn't do it the way I described it: The CSS selector has to be `.x > img { ... }` ( not just `.x`) so that the width applies to the image, not the DIV. – Johannes Jun 29 '17 at 00:23
  • :) Thank you so much, that fixed it. – Ralph Jun 29 '17 at 00:25