-1

I do have an image from a size of 3800x2000. What i want to do in CSS now is to make the width of 3800 always fit perfectly to the width of the browser and to always have the full height of the image shown. Means i have to scroll down with the broswer to see the end of the image. I am talking about a background picture. Thank you very much in advance.

user3877230
  • 439
  • 1
  • 5
  • 18

4 Answers4

1

First of all, thank you all very much for your answers. What worked perfectly fine tested on several screens is

<img src="bg.jpg" style="width: 100%; position: absolute;"/>

That did it for me. Thank you again.

user3877230
  • 439
  • 1
  • 5
  • 18
0

It's simple actually

Old CSS Solution

img {
  width: 100%;
}
<img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg">

New CSS Solution

html, body {
  width: 100%;
  height: 100%;
}

div {
  width: 100%;
  height: 100%;/*or 9999px*/
  background-size: cover;
  background-image:url(http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg)
}
<div></div>

You can increase the height on the div, or leave it at 100%

JavaScript Solution

window.onresize = function () {
  var elems = document.getElementsByClassName('adjustwidth'),
    i;

  for (i = 0; i < elems.length; i += 1) {
    elems[i].style.width = (window.innerWidth || 0) + 'px';
  }
}

window.onresize();
<img class="adjustwidth" src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" />

The reason I am providing a JavaScript solution is so that elements whose parents' width isn't 100%, it will still work.

Downgoat
  • 13,771
  • 5
  • 46
  • 69
  • Hey! Thank you very much for your solution, it works perfectly but i forgot to write that i am alking about a background image here, I am sorry! DO you have a solution for that also? Thank you! – user3877230 Apr 05 '15 at 18:46
  • @user3877230 yes, this should still work. If it does't take a look at [background-size](http://www.w3schools.com/cssref/css3_pr_background-size.asp) cover/contain. – Downgoat Apr 05 '15 at 18:49
  • @user3877230 I've updated my answer. This is not fully possible because `background-image` is for backgrounds and cannot modify the `div` height. You could use a complicated JavaScript solution, or switch to an `img`. – Downgoat Apr 05 '15 at 19:08
0

Use background-size: 100% 2000px; if you want to keep height exactly 2000px or if you want to contain bg image without changing the aspect ratio(in your case image size will become < window height. therefore no scrolling to see the img end) use background-size:contain . If its a body background and you want it to cover the body then use background:cover

mdn

tkay
  • 1,716
  • 14
  • 18
  • Hey, thank you very much, but this only fits the background to the width and not makes the height scrollable. I did put it in the background exactly like this in the body {} of the css. – user3877230 Apr 05 '15 at 19:51
0

Having an element scale in height relative to a background image with css alone isn't possible. If you insist on using a background image, there's a 'hack' solution answered here. But I suggest you use an <img> tag and alter its style attributes.

JSFiddle

.dat-image-doe {
  position: absolute;
  top: 0;
  z-index: -1;
  width: 100%;
  height: auto;
}

With an absolute position you can move the image behind any other content you have on the page and use it as "background image" that still contributes to the length of the page (you can scroll down with the broswer to see the end of the image ).

Additionally, make sure you set the margin of the <body> to 0 if you haven't already. Not doing so with cause unwanted horizontal scrolling.

Community
  • 1
  • 1
D3RPZ1LLA
  • 281
  • 3
  • 8