Background image issue

Hi guys,

Ive just done my first [website ]( HTML & CSS and was really happy that Ive managed it so quickly (its simple and primitive but I do like it). Not until I opened it on another computer and I realized that its not finished at all…

So, I have a specific concern here, which I hope you can help me out with.

It`s about the composition of the background when opened in different resolutions

What I`ve done for the background is to safe 3 separate images:
1 image float:left
1 image float:right
1 image white gradient on top of both creating space for the conent and a smooth transitions between the two images.

some code snippets follow:



<div id="background">

     <span id="bg"><img src="../images/content_bg.png" /></span>   
     <span id="left"><img src="../images/bar_right.png" /></span> 
    <span id="right"><img src="../images/bar_left.jpg" /></span>



#background {


#right {


I`ve designed the whole thing on my 16" laptop and it looks ok, but when opened on a bigger screen, it all breaks.

So, how can I make it happen that no matter in what resolution the page is loded, the images in the background would arrange properly ?

thank you in advance guys!!!

That code you’ve posted seems to bear no relation to the page you linked to.

Anyhow, that page is very slow to download, on account of the oversized (not-web-optimized) images. They should be vastly smaller file sizes than that.

A background image should be one image set on the body element, not broken up into pieces, which is a recipe for disaster.

Anyhow, I’m not sure if I’m looking at the right thing, so perhaps confirm what the problem is and what page you are referring to. That page you linked to looks fine on a big monitor, but as I said, the images took a long time to download even on a fast connection, and it’s very out of date to lay out a page with tables. (We can help you to do better than that.)

If you have Photoshop, make sure to use the Save for Web feature, which reduces the image file sizes enormously.

Hi ralph,

to be honest, I`m quite baffled here! You are the second one, who tells me that the page is done in tables… but how come?

Ive personally coded every little bit in CSS using Dreamweaver and I really cant understand where you see tables? Ive just checked it using chromes "inspect elements" and its all there. pure css.

Ok, may be something went wrong with the link or something. Here the web-page again:


it loads with a short intro, which is an animated gif made in Photoshop and sliced in tables I guess. But thats just the intro…

And about the background images. Well as I said, I cant save it as a single merged image, because it would be fixed size (1024x768 or something) and it wouldn’t let me stretch it so, as to always fill the whole monitor. That`s why I broke it into 3 parts, to position them to the left, to the right and the white gradient on top.
At this point, I think that the problem may lie in the size(pixel not kb) of the gradient, but I still dont know how I can fix it… … . .

I would be very grateful for any further advice/comment! Thanx in advance !

I`ve just found the same question asked by someone else on another forum.

it`s formulated much better than I did, so here it is, the same question asked from Abby:

On smaller screens it will be too wide and make a scroll bar at the bottom, whereas on large/wide screens the image wont be wide enough. So, my question is: how do you make it compatible with all screen resolutions(without having a scroll bar on the bottom or a gap)? To have it resize properly for everyone who uses it?

The basic question you are asking is not hard to answer. Flexible, responsive web design is pretty simple. However, you’ve still posted the same link, a completely table-based site. This is the main part of your code:

<table id="Table_01" width="917" height="673" border="0" hspace="300px" vspace="40px" cellpadding="0" cellspacing="0">
		<td colspan="5">
			<img src="animation/index_01.gif" width="916" height="32" alt=""></td>

			<img src="animation/spacer.gif" width="1" height="32" alt=""></td>
		<td rowspan="3">
			<img src="animation/index_02.gif" width="722" height="641" alt=""></td>
			<a href="Pages_BG/index_bg.html" target="_self"
				onmouseover="window.status='bulgarian';  return true;"
				onmouseout="window.status='';  return true;">
				<img src="animation/intro_03.gif" width="45" height="26" border="0" alt="bulgarian"></a></td>
		<td rowspan="3">

			<img src="animation/index_04.gif" width="22" height="641" alt=""></td>
		<td rowspan="2">
			<a href="Pages_EN/index_en.html" target="_self"
				onmouseover="window.status='english';  return true;"
				onmouseout="window.status='';  return true;">
				<img src="animation/intro_05.gif" width="45" height="27" border="0" alt="english"></a></td>
		<td rowspan="3">
			<img src="animation/index_06.gif" width="82" height="641" alt=""></td>
			<img src="animation/spacer.gif" width="1" height="26" alt=""></td>

		<td rowspan="2">
			<img src="animation/index_07.gif" width="45" height="615" alt=""></td>
			<img src="animation/spacer.gif" width="1" height="1" alt=""></td>
			<img src="animation/index_08.gif" width="45" height="614" alt=""></td>

			<img src="animation/spacer.gif" width="1" height="614" alt=""></td>

this is just the intro-page with the animation. Photoshop tiled it in tables because I`ve used slices for the language flags.

when you choose a language you are sent to the main content part of the page.

I`ve just been told, that I should divide my layout in 3 columns (div left, center, right) and try to put the 3 images respectively as a background …

I`m on it to try it out right now.