8

Possible Duplicate:
Stretch and Scale a CSS image Background - With CSS only

I want to set div background image div(width: 1000, min-height: 710) and the image size is 753 x 308 whan I trying to set it image is not getting fit to the div size what should i do?

.Invitation {
    background-color: transparent;
    background-image: url('../images/form.png');
    background-repeat: no-repeat;
    background-position: left top;
    background-attachment: scroll;
    background-size: 100%;
    width: 1000px;
    height: 710px;
    margin-left: 43px;
}

The div class is

.content {  
   clear:both;  
   width:1000px;    
   background:#e7e8e9;
   background-image:url('../images/content.jpg');
   background-repeat:no-repeat;
   background-position:left top;
   min-height:710px;
}

and the code is

<div class="content"><div class="Invitation">form goes here....</div></div>
Community
  • 1
  • 1
Rekha Prabhu
  • 135
  • 1
  • 3
  • 9

1 Answers1

7

Try something like this:

CSS

<style type="text/css">
  img.adjusted {
    position: absolute;
    z-index: -1;
    width: 100%;
    top: 0;
    left: 0;
  }
  .Invitation {
    position: relative;
    width: 1000px;
    height: 710px;
    margin-left: 43px;
  }
</style>

HTML

<div class="Invitation">
  This is an example
  <img src="http://files.myopera.com/arshamr/albums/612249/Nature%20(3).jpg" alt="" class="adjusted">
</div>

I hope this helps!

Marco Godínez
  • 3,440
  • 2
  • 21
  • 30
  • 1
    Note that negative zindex may hide the element in some versions of Firefox due to a bug where the element is rendered below the document. It may be safe by now, I've not tested with 3.6 nor the newer versions. – Ricardo Souza May 27 '12 at 04:10
  • Well, at least according to the standard, there's no limit to z-index, either value positive or negative – Marco Godínez May 27 '12 at 04:20
  • You're right. CSS 2.0 doesn't specify a limit and 2.1 specify that negative values are allowed, but old versions of FF have this bug. – Ricardo Souza May 27 '12 at 04:24
  • Its a background image.How this code be possible? – Rekha Prabhu May 27 '12 at 04:39
  • Yes, try it! It's an image underlying that is achieved through the attribute z-index, furthermore is positioned at the top and that makes it seem like a background... – Marco Godínez May 27 '12 at 06:58
  • To avoid possible css hack due to the bug of FF, could be used a conditional to modify the z-index value to positive and add "display: none" to image element. Moreover, I think it you could also play with positive values for z-index, putting "This is an example" or any content within a div element with relative position and a z-index value greather than the of image. – Marco Godínez May 27 '12 at 07:16