1

My background image is fluid only to a certain point. When resizing the browser it starts to shrink

background-image : url("http://...");
background-repeat:no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center right;
height: 400vh;

You can see what I'm talking about here

Icarus
  • 1,627
  • 7
  • 18
  • 32
Tomas.R
  • 715
  • 2
  • 7
  • 18
  • please elaborate, what is the desired behavior? – web-tiki May 01 '14 at 09:31
  • I want this image to be fluid. As it is now, when I resize my browser to the narrowest point I can't see the WHOLE image, there is only table left, no me :] – Tomas.R May 01 '14 at 10:55

2 Answers2

0

The height: 400vh is your problem I believe if you can put this code on the html element as such

 html { 
  background: url("http://...") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
 }

and delete the class "me" from your code this should be fluid for you. The problem is you are setting the background on "me" which doesn't contain any content and its height is only being set by you as "400vh" so once it hits that height it stops being fluid so by setting it on the html it will wrap the whole page and be fluid

Edit

if you desire to have your image not clipped in anyway and show 100% of it on every screen you can do something like this

#wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto 0px;
}

turn the me class into an image instead of a div

<img class="me" src="http://24.media.tumblr.com/8760c4adc4f8c4b7cafa14c5cf6cc55c/tumblr_n2kq1hnFSF1tswi9io1_1280.jpg"></img>

and the css like this

.me { 
  width: 100%;
 }

this will give you a wrap that will cover 100% of the persons screen size and will allow you to set the image to be in the background and will not clip the image as you resize. If you are trying to make this website responsive I wouldn't suggest using absolute references in your css as this may lead to some items out of place on different screen sizes. You may want to check out www.getbootstrap.com since they provide an excellent library for a responsive grid.

zoruc
  • 819
  • 7
  • 13
  • Thanks man, I tried it but it didn't work. Here it is [link](http://goodnormal.tumblr.com/html) – Tomas.R May 01 '14 at 10:49
  • Ok lets try something else then so you want the image to constantly be full size as you resize the browser? – zoruc May 01 '14 at 17:01
  • the only problem you will have with trying to keep the image full sized as you resize the page however will be that if your view's height is larger than the image's size it may have some blank space on the bottom is that ok with you? – zoruc May 02 '14 at 07:23
  • edited my answer please let me know if this is what you are trying to accomplish – zoruc May 02 '14 at 17:59
0

click_hear_demo

css

#wrap{
    display:block;
    width: 100%
   }
body {
    margin: 0 0;
    position: relative;
   }

.me { 
    background-image : url("http://d1jqu7g1y74ds1.cloudfront.net/wp-content/uploads/2013/04/44GHz_image_1.jpg");
    background-repeat:no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center right;
    height: 400vh; /*cia su viewportais reikes padirbet, nes cia realiai procentai kaip ir*/
}

}

html

<body>
    <div id="wrap">
        <div class="me"></div>
    </div> <!-- end of #wrap -->
</body>
Prashant
  • 704
  • 10
  • 23