Changing Pictures of Background
- Thanks to this site, where I take the original picture (1024 x 768 pixels)
- We use a picture as background for the body part of the page :
/* defining the picture used for background */
body
{
background-image:
url('http://YOURSITE.googlepages.com/YOURPIC.jpg'); background-repeat: no-repeat;
background-attachment:fixed;
}
body
{
background-image:
url('http://YOURSITE.googlepages.com/YOURPIC.jpg'); background-repeat: no-repeat;
background-attachment:fixed;
}
Changing width of container
- We define a width of 500 pixel, to adapt the content
- We erase the background of html part (outer part of the page)
#main-content
{
background-color: transparent;
}
#container
{
width: 500px;
border: 0 none;
background-color: transparent;
margin-left: 10px;
}
html
{
background-color: transparent;
}
- Create a file with *.css extension, and upload it to GPC with the name fixed.css
Loading the Style Sheet
- As GPC remove the link tag, we need to load the external style sheet with javascript
- Write this javascript in the beginning of subtitle section or main section :
<script language="Javascript" type="text/javascript">
var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href =
'http://YOURSITE.googlepages.com/fixed.css';
cssNode.media = 'screen, print';
cssNode.title = 'style sheet for background';
document.getElementsByTagName("head")
[0].appendChild(cssNode);
</script>
var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href =
'http://YOURSITE.googlepages.com/fixed.css';
cssNode.media = 'screen, print';
cssNode.title = 'style sheet for background';
document.getElementsByTagName("head")
[0].appendChild(cssNode);
</script>
Other Examples with Simple Template
More Informations
One Day - One Label - One Wine
Discover the Most Beautiful Wineries of Switzerland, the Pictures : Clos, Domaines et Châteaux
Find a Wine with Google CSE
