How to use patterns
Have you read the instructions on how to save and transfer files? Great. Are you familiar with html and maybe even css? Wonderful.
These examples are here to show ways in which the text is easier read from the background than if you just put the image in the background and the text right on top of it and also how to align text so that it doesn't ovelap the left-sided patterns.
The following examples will open in a new window. Feel free to look at the source codes.
"Left-sided" images
A word of warning first: the left-sided backgrounds are "only" 1200 pixels wide. That means that if somebody is looking at your site with a bigger screen resolution than 1200 pixels wide the result is not what you wanted. The images will be repeated from left to right as well as from top to bottom.
- The text is here within the body and there are no tables. Pretty difficult to read, isn't it?
- Here the text is in a table aligned to center and defined 40% wide. Much better, right?
code for the first example:
<body background="graphs/pictures/aragorn.jpg">
code for the second example:
<body background="graphs/pictures/aragorn.jpg">
<table border="0" align="center" width="40%">
You can also try "right" in the align.
(remember to close the table too! )
Patterns
- the text is here within the body and there are no tables
- here the text is in a table with a white background
- you can also use these pictures inside a cell or a table or a div. However, you need to be familiar with the css to do this.
code for the first example:
<body background="graphs/pictures/horseandrider.jpg">
code for the second example:
<body background="graphs/pictures/horseandrider.jpg">
<table border="0" align="center" bgcolor="#ffffff">
(remember to close the table too!)
code for the third (css) example:
<div class="kruunuesim">
In this case there would be a class in the style sheet like this:
.kruunuesim
{ background-image: url(bgs/graphs/crown.jpg);
background-repeat: repeat;
width: 50%;
color: black; }
Nenuial © 2003-2018 Nerwen