Image Fit

Hi, I have the following table with an image on the background, The problem is that I havent been able to make it Fit without resizing the Div "Shrink"

<!doctype html>
<html>
<head>
<style>
div.background
  {
  width:500px;
  height:250px;
  background-image:url("http://writing-jobs-uk.com/wp-content/uploads/2012/06/green-energy.jpg");
  border:2px solid black;
  }
div.transbox
  {
  width:400px;
  height:180px;
  margin:30px 50px;
  background-color:#ffffff;
  border:1px solid black;
  opacity:0.6;
  filter:alpha(opacity=60); /* For IE8 and earlier */
  }
div.transbox p
  {
  margin:30px 40px;
  font-weight:bold;
  color:#000000;
  }
</style>
</head>

<body>

<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p>
</div>
</div>

</body>
</html>

Open in new window

jhonc66Asked:
Who is Participating?
 
Julian HansenCommented:
Your image is too large - you need to scale it to the size of your div. You can do this in CSS like so
line 5 of your html file change background-image to
  background:url("http://writing-jobs-uk.com/wp-content/uploads/2012/06/green-energy.jpg") no-repeat;
  background-size: 500px 250px;
  ...
}

Open in new window


Add the width and height to the background declaration

However, As Usual, this won't work in IE8 so alternatively resize your image or look here
http://stackoverflow.com/questions/4885145/ie-8-background-size-fix
0
 
Julian HansenCommented:
Thanks but as a matter of interest - why the B rating?
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.