0

I need to stretch image inside div element.

So on the site: http://fishcacher.sytes.net/ there is background image enter image description here

for "fc-container" div element:

.fc-container {
    background-image:url('../images/bg_1400.png'); 
    background-repeat:no-repeat;  
    margin:0px; 
    background-size: cover;
}

I need it works exactly like this http://www.htmlite.com/faqEX004.html , but inside my "fc-container" div element. Currently a lot of image is hidden below the bottom bar.

I tried different ways but can't fix that.

Appreciate any help. Thanks a lot!

T J
  • 42,762
  • 13
  • 83
  • 138
ihorko
  • 6,855
  • 25
  • 77
  • 116
  • possible duplicate of [Stretch and scale a CSS image in the background - with CSS only](http://stackoverflow.com/questions/1150163/stretch-and-scale-a-css-image-in-the-background-with-css-only) – p.s.w.g Mar 10 '14 at 18:49
  • No, it doesn't work , because in that answer it has position fixed and it doesn't scroll together with fc-container div – ihorko Mar 10 '14 at 18:57

2 Answers2

0

add these styles to your fc-container 

position:fixed; top:0; left:0; width:100%; height:100%;
Morrisda
  • 1,380
  • 1
  • 11
  • 25
0

On the your example site, they haven't used CSS alone to create their background, they've used a wrapper that contains a image that is then stretched to fill the whole screen. Here's the required HTML code:

<div class="backgroundimagewrapper">
    <img class="backgroundimage" src="http://fishcacher.sytes.net/images/bg_1200.png" />
</div>

And here's the CSS 

.backgroundimagewrapper{
    position: absolute; /* So we can position our div precisely */
    left: 0; /* Move it to the top-left */
    top: 0;
    z-index: -100; /* Make it appear behind other elements */
    padding: 0; /* Make sure we don't have any white space around the edges */
    margin: 0;
    width: 100%; /* Make it fill our whole screen */
    height: 100%;
}
.backgroundimage{
    width: 100%; /* Make the image fill the whole div */
    height: 100%;
 }

That's how they've done it on the website you've linked. Anyway, here's a JSFiddle with the code: http://jsfiddle.net/T2t5m/5/

Xanco
  • 874
  • 1
  • 10
  • 15
  • No, in your example "

    This appears on top!

    " is over background, background should be only inside "backgroundimagewrapper" element     – ihorko Mar 10 '14 at 19:00
  • I mean, for example, I have three divs, top, middle and bottom. Background should be stretched only inside middle div... – ihorko Mar 10 '14 at 19:02
  • Like this? http://jsfiddle.net/T2t5m/2/ It now has a header and footer div with the image being stretched in the middle – Xanco Mar 10 '14 at 19:21
  • Yes, that's correct, but now, when I try add anything to content with background it appears below the background, but should be inside, see: http://jsfiddle.net/T2t5m/3/ – ihorko Mar 11 '14 at 06:04
  • I think I've got it now, you want a header and a footer with the image as a background in-between with content over it? Like this: jsfiddle.net/T2t5m/4 – Xanco Mar 11 '14 at 11:31
  • No problem! Any-time! – Xanco Mar 11 '14 at 14:28