CSS : Changing background image and length of a page to 100%

Hello,

I have half an image background on my site
But the image does not display all ... how to please
Depending on the screen that the image I'd like to take all the screen Thanks!

Here is what I have in my mid template_css:

Code:

---

body (
margin: 15px;
height: 100%;
padding: 0px;
font-family: Arial, Helvetica, Sans Serif;
line-height: 120%;
font-size: 11px;
color: # 38,081th; / * Color main text * /
background: url (.. / images / fond.jpg) no-repeat;

)

---

I think, this is bit complicated, in fact it is an image and it has fixed size ............ impossible

The only way it seems to me to be a script that detects the size of the screen of the visitor and then a function that does not envy the same image depending on the size of the screen (an image for each different size of screen)

hello,

Indeed, there is the javascript code to insert.

otherwise, it is possible to repeat the display of the image width and height.

Quote:

---

Originally Posted by Mac-Imagery

hello,

Indeed, there is the javascript code to insert.

otherwise, it is possible to repeat the display of the image width and height.

---

but given the size of the image and the original reason this might not be beautiful would require a smaller image which does not repeat the site
in this case

Code:

---

  background: url (.. / images / fond.jpg); 
  background-repeat: repeat;

---

There are many more resolutions than this (not taking into account the Wide screen and very large resolutions, which are rare but poorly accepted default display). It is not a solution to test the resolution.

I see 2 solutions:

1 - do not use a background-image but an image that you put in width and height to 100% (in a 100% body height in history to avoid IE bug)

- Put the rest of your site in a div with position: absolute above.
This solution is not very complicated to implement. Perhaps some IE bug to manage. But above all, his biggest problem is that an image stretched by a browser is not very pretty.

2 - If it is you who made this picture and that you have the sources, a better solution is to substantially the same as for a div with rounded corners:

- Create an image that you provide a reason for the background that can be repeated without being ugly. It does not include the 4 photos that you have placed at 4 corners.

- Create 4 images (gif it will be easier than png-24, but you will have a color that is clipping in the shade of the background) from the 4 photos with a background (= edges) transparent.

- In your template (index.php), you place a div with your pattern background image is repeated in 2 directions.

- In this div, you place it as 4 other div which are each time with each other. They will each have an image in the background photo-image that will not be repeated and will be positioned in one corner.

- You define these divs and your body with a height of 100%.

- If you are forced to use the PNG-24 for transparent photos will require that you met up a solution for non-support for this format by IE6 and earlier.

- Simply, align your background image to the top of the page and the problem will get resolved.