css background image fit to div

59,564

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!

Share:
59,564
Rekha Prabhu
Author by

Rekha Prabhu

Updated on April 02, 2020

Comments

  • Rekha Prabhu
    Rekha Prabhu about 4 years

    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>