Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

css background image fit to div [duplicate]

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>
like image 565
Rekha Prabhu Avatar asked May 27 '12 03:05

Rekha Prabhu


People also ask

How do I make my background image fit the size of a div?

How do I make an image fit in a div? Answer: Use the CSS max-width Property You can simply use the CSS max-width property to auto-resize a large image so that it can fit into a smaller width <div> container while maintaining its aspect ratio.

How do I stop a background image from duplicating?

To make a background image not repeat in HTML, specify no-repeat in the background-repeat property or the background shorthand property. The background image is set to 'no-repeat' using the 'background-repeat' property.

How do I fit a full background image in CSS?

There are four different syntaxes you can use with this property: the keyword syntax ("auto", "cover" and "contain"), the one-value syntax (sets the width of the image (height becomes "auto"), the two-value syntax (first value: width of the image, second value: height), and the multiple background syntax (separated ...

How do I stop an image from repeating in CSS?

The CSS background-repeat is what you're looking for. If you want the background image not to repeat at all, use background-repeat: no-repeat; .


1 Answers

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!

like image 118
Marco Godínez Avatar answered Nov 18 '22 07:11

Marco Godínez