Adding a background picture (Full Version)

All Forums >> [Web Development] >> Microsoft FrontPage Help



Message

A.Daudey -> Adding a background picture (1/2/2008 17:44:52)

I know this is probably a topic that has been discussed a zillion times, but I am unable to find the right anwers in all the topics.

I would like to add a background to my webpage. I have made a background in Photoshop and saved it as a JPG. Basically it show a firm color on the right side, that fades to white in the middle of the page.

The first problem is that the JPG I created is apparently smaller than the screen so it is tiling. How do I create it in such a way that it will only show once and fill the whole screen??

Best regards,

Arne



coreybryant -> RE: Adding a background picture (1/2/2008 18:01:36)

Background image to fit screen to answer the question but a lot of users use CSS to have the image show up only once. Something like 
<body style="background: #fff url('images/background.gif') no-repeat;">
might be considered



A.Daudey -> RE: Adding a background picture (1/3/2008 5:06:11)

Hi Corey,

I managed to make some progress thanks to you!! I took some code from Stu's site with the rabbit and this actually makes the picture fill the screen. There is one problem though, somehow I am unable to go to the layer with text I added in design mode of Frontpage. The layer disappears and it just shows the background. I can change the text through the code, but this is not so convenient. Do you know a solution.

Here is the code I used. Best regards,

Arne




<html>

<html>
<head>
<style type="text/css">
html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden;}
#background{position:absolute; z-index:1; width:100%; height:100%;}
p {line-height:1.8em; letter-spacing:0.1em; text-align:justify;}
</style>
</head>

<body>
<div>
<img id="background" src="images/background.jpg">
</div>
<div id="scroller">
<div id="content">

<head>
<meta http-equiv="Content-Language" content="nl">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style fprolloverstyle>A:hover {color: #008000; font-weight: bold}
</style>
</head>

<div style="position: absolute; width: 1085px; height: 100px; z-index: 1; left: 98px; top: 175px" id="laag1" align="center">
<b><font face="Comic Sans MS" size="6" color="#000080">Binnenkort vindt u
hier de site van Nederland Vakantie Beheer.</font></b><p> </p>
<p><b><font face="Comic Sans MS" size="6" color="#000080">Voor meer
informatie tel:06-45522058 of e-mail: <a href="mailto:info@nvbbv.nl">info@nvbbv.nl</a> </font></b></div>
<p> </p>

<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>

</body>

</html>



coreybryant -> RE: Adding a background picture (1/3/2008 10:45:54)

Take another look at your code. It seems you might have copied a bit too much. You have 
<html> 

<html>
(You only need one). And you have 
<head> 
<meta http-equiv="Content-Language" content="nl"> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> 
<style fprolloverstyle>A:hover {color: #008000; font-weight: bold} 
</style> 
</head>
in the middle of your <body>. This will cause some problems in some browsers



A.Daudey -> RE: Adding a background picture (1/3/2008 17:37:46)

Hello Corey,

Thanks for your help. I had another look at the code and made some changes.

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nieuwe pagina 1</title>
</head>

<img id="background" src="images/background.jpg" style="position: absolute; left: 0; top: 0" width="102%" height="104%">

</body>

</html>

This is what it looks like now. Result can also be seen on http://www.parcsupport.nl/test.htm but still the problem remains that when I add layers with for example text, the layer disappears behind the background and I am unable to find it anymore. I am kind of lost on how to solve this. Any ideas, is it not the correct way to put the background in or am I missing something in the code.

Best regards,

Arne



jaybee -> RE: Adding a background picture (1/3/2008 17:43:50)

That link just takes me to the background. I can't tell you exactly what's wrong without the full page loaded so I can grab the code and css.

I suspect you have the layers on the same level. 

 <style type="text/css">
html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden;}
#background{position:absolute; z-index:1; width:100%; height:100%;}
p {line-height:1.8em; letter-spacing:0.1em; text-align:justify;}
</style>
</head>


z-index:1

is the layer level. You need the background lower than the rest.



A.Daudey -> RE: Adding a background picture (1/3/2008 17:59:09)

HI Jaybee,

OK I have added another layer over the background. z-index for background is 0 and for the layer z-index=1. I have added the text "testtest"and published it on http://www.parcsupport.nl/test.htm .

If I go to Frontpage in the design screen and try to click in the layer with text it disappears and the screen only shows the background. This makes it impossible to make changes to the layers. How do I solve this???

Best regards,

Arne



jaybee -> RE: Adding a background picture (1/3/2008 19:46:04)

It's showing up fine in Firefox and IE7. You don't say which version of FP you're using but prior to 2003 forget it, CSS was a completely foreign concept. 2003 is better but there are certain things it just doesn't like and I suspect this may be one of them.

FP uses IE for previewing, are you using IE7? IE6 might not be too great with z-index.

The only thing I can suggest apart from rude comments about FL is, take the background out. Get the page right then put the background back when you're done and ready to upload.

But I'm confused. The code for the page you have loaded is 
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nieuwe pagina 1</title>
</head>

<div style="position: absolute; width: 100px; height: 100px; z-index: 1" id="laag1">
	testtestest</div>

<img id="background" src="images/background.jpg" style="position: absolute; left: 0; top: 0" width="102%" height="104%">

</body>

</html>


and there's no associated css file, where is the z-index: 0?



A.Daudey -> RE: Adding a background picture (1/5/2008 18:14:39)

Hi,

I have solved the problem by creating a background in Photoshop of 5 pixels height and 2000 pixels width. Works perfect!

Best regards,

Arne

PS I do not know how to close this thread.



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.078125