Problems making image cover screen in high res

**Giannis** · 18 October 2007, 07:12 PM

I'm doing some graphics for my web site (located at www.sound-creations.net ). At high resolution (higher than 1024X768) the background image leaves an annoying white space at the bottom of the screen. I simply thought that I could resize the image and it would be okay - but that's not quite simply the case.

Can any one give me a pointer on what I need to think about when it comes to making a background image fit exactly so that no white space is left or so that the image doesn't repeat in an ugly way?

**haakoo** · 18 October 2007, 07:51 PM

Hi,

Put this inside the body tag
topmargin="0" rightmargin="0" bottommargin="0" leftmargin="0" marginwidth="0" marginheight="0"

Hans

**suunto** · 18 October 2007, 08:00 PM

there is a gap in services? on your menu

**Giannis** · 18 October 2007, 08:11 PM

Thank you for the replies.

I'm trying to figure out hjow to incorporate that code into my pages... I'm kinda fresh when it comes to making web sites.

Apparently I will need some knowledge in CSS in order to learn how to make my pages work properly in different resolutions and settings.

A gap in the services...?

**haakoo** · 18 October 2007, 08:13 PM

Hi,

Or you could try make a very big picture(larger then common screen resolution)
And put it in your page with the width and height set to 100% instead of absolute pixel numbers.
It will stretch the picture and given the size it will take some time to load
This just to point out there are larger screen sizes possible look at picture
Hans

**haakoo** · 18 October 2007, 08:17 PM

Hi,

for the code
Rightclick on your html-file,open with notepad,enter the code provided
inside where it says:
<body background-color="#FFFFFF" put here the code >

Hans

**steve.ledger** · 18 October 2007, 08:21 PM

An often better way is to create a bg image that will tile well or one that will blend into a page bg colour.
Also you could constrain your pages to an inline frame (think of it as a window) like this:
*Save the attached bgblue.jpg copy this code to the clipboard, paste into notepad, give it a .htm extension and save it to the same folder with the bgblue.jpg, then drop into your browser to see the result.

Code:

<body>
<style type="text/css">
<!--
body {
	background-color: 4396BE;
	background-image: url(bgblue.jpg);
	background-repeat: repeat-x;
}
-->
</style>

<div align=center>
<iframe name=giannis src=http://www.sound-creations.net/ width=900 height=700 scrolling=auto frameborder=1 marginheight=0 marginwidth=10>
</div>
</body>

**suunto** · 18 October 2007, 08:47 PM

Originally Posted by Giannis

Thank you for the replies.

I'm trying to figure out hjow to incorporate that code into my pages... I'm kinda fresh when it comes to making web sites.

Apparently I will need some knowledge in CSS in order to learn how to make my pages work properly in different resolutions and settings.

A gap in the services...?

yeah, is that not a gap

**Egg Bramhill** · 18 October 2007, 08:49 PM

Another way would be to change the page background from white to a blue colour matching your background image.

When you create the background give it a linear transparency towards the bottom against the same blue background, then it will appear to merge into the web pages blue background. It will only work for the bottom of the page though, not the sides.

**Egg Bramhill** · 18 October 2007, 09:09 PM

Giannis,

Whilst looking at your site I noticed that there are problems with the display in Firefox. You might wish to chase this up in the Site Design and Publishing Forum. The Contact page also breaks up in Firefox.