|
| |
|
|
A.Daudey
Posts: 12
Joined: 12/27/2007
Status: offline
 |
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
Posts: 2422
Joined: 3/17/2002
From: Castle Rock CO USA
Status: offline
|
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
_____________________________
Corey R. Bryant
Merchant Accounts | Toll Free Numbers | My Blog | Expression Web Blog
| |
|
|
|
A.Daudey
Posts: 12
Joined: 12/27/2007
Status: offline
|
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
Posts: 2422
Joined: 3/17/2002
From: Castle Rock CO USA
Status: offline
|
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
_____________________________
Corey R. Bryant
Merchant Accounts | Toll Free Numbers | My Blog | Expression Web Blog
| |
|
|
|
A.Daudey
Posts: 12
Joined: 12/27/2007
Status: offline
|
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
| |
|
|
|
A.Daudey
Posts: 12
Joined: 12/27/2007
Status: offline
|
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
| |
|
|
|
A.Daudey
Posts: 12
Joined: 12/27/2007
Status: offline
|
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.
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
