# Solved: CSS Background



## Gopaldaas (Sep 13, 2008)

How to stretch or Crop background image to fit div.
I read on a blog about using "background-size" it doesn't seem to work.


----------



## ehymel (Aug 12, 2007)

Post some code or a URL so we can see what you are trying to do, then you'll get better help.


----------



## Gopaldaas (Sep 13, 2008)

Well, I guess you didn't read my 2 lines carefully but here is the code:

div
{
float: left;
width: 120px;
background-image: url('images/navback.png'); (This image is 140 x 79 px)
background-repeat: no-repeat;
}

Well the image is bigger then width of the div how to crop it using CSS. Someone told me to use "background-size" it didn't work.


----------



## Gopaldaas (Sep 13, 2008)

Ok! my apologies I may have used wrong words, I should have asked how to re-size the image.


----------



## tomdkat (May 6, 2006)

"background-size" is a CSS3 property so only browsers with CSS3 support will render the background image correctly.

However, you can dynamically scale an image that is effectively a DIV background by overlaying DIVs.

Here is an overview:



(background image)


(content)

Now for the CSS styles:

.container { 
/* Center the DIV */
margin-left: auto; margin-right: auto;

/* Make the width dynamic, for this example */
width: 95%;

/* Make a percentage to make dynamic */
height: (some height);

/* Needed for the "magic" */
position: relative;
}

/* All of this styling is needed to position and size the background image container properly */
.background {
width: 100%; height: 100%;
position: absolute;
top: 0; left 0;
}
.background img { width: 100%; height: 100%; }

.content {
/* Center the content DIV */
margin-left: auto; margin-right: auto;

/* Needed for 'magic' */
position: relative;

/* Make sure the content overlays the background image */
z-index: 10;

width: (some size);
}

So, what this does is create a container DIV that will contain everything. Inside this DIV, we have an absolutely positioned DIV that will have the full height/width of the container DIV. Inside this absolutely positioned DIV, we have an image with 100% width/height dimensions, so it will completely fill this absolutely positioned DIV. After the absolutely positioned DIV, we've got a relatively positioned DIV with a z-index specified to make sure it will overlay the absolutely positioned DIV.

Now, since the container DIV has a width specified as a percentage, it will dynamically scale in size as the browser window changes size. As a result, the background image will also scale in size. Why? Because it effectively has the same dimensions as the container DIV.

Here is my actual HTML test case:

```
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>CSS DIV Background</title>
  
  <style type="text/css">
html, body {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin-top: 0;
  margin-left: 0;
  background-color: #c0c0c0;  
}
.container {
  border-style: solid;
  border-width: 1px;
  margin-right: auto;
  margin-left: auto;
  width: 90%;
  height: 90%;
  margin-top: 10px;
  position: relative;
}
.container-background {
  position: absolute;
  margin-top: 0;
  margin-left: 0;
  width: 100%;
  height: 100%;
}
.content {
  border-style: groove;
  border-color: red;
  position: relative;
  margin-right: auto;
  margin-left: auto;
  width: 75%;
  height: 75%;
  z-index: 10;
  font-family: Arial,Helvetica,sans-serif;
  font-weight: bold;
  padding-left: 10px;
  margin-top: 10%;
}
.container-background img {
  width: 100%;
  height: 100%;
}

  </style>
</head>
<body>

<div class="container">

<div class="container-background">
<img alt="background" src="background.jpg">
</div>

<div class="content">
<p>content</p>
</div>

</div>

</body>
</html>
```
Attached are some screenshots.

Hope that helps!

Peace...


----------



## Gopaldaas (Sep 13, 2008)

Thanks tomdkat, it worked, thank you


----------



## tomdkat (May 6, 2006)

Great! Thanks for the update! 

Peace...


----------

