Forum Moderators: not2easy
I am new to this site and I think it is excellent. I have a question after performing a search and not finding what I was looking for. I basically want to know a few things.
1. How do I create a background and have all text or graphics scroll as if it is on a transparent layer over the backgground?
2. Is this possible using graphics also such as jpegs, gifs, banners, etc?
I am using FP2000 and would appreciate all help. I would also appreciate any links to other discussions and online websites that will help me get better at this and other design issues. Thank you all in advance! :)
Jackal
You could try something like:
body {
background-image: url(your_image_here.gif);
background-repeat: repeat-y;
background-position: left;
background-attachment: fixed;
}
Or you could apply these rules to a div.
Thanks for the advice but what is a div? I understand the rest of what you wrote pretty much but I am still a little unsure here. Please elaborate a little more for those like me who are still learning. Thanks!
For example in a typical two-column layout, you will have 4 DIV in your page.
DIV - HEADER
DIV - LEFT COLUMN
DIV - RIGHT COLUMN
DIV - FOOTER
Make some search in this forum as they are hundred of topics regarding DIV and SPAN and how to use them correctly.
But you could also just use the CSS above in TD or any other block element. It should work as well.
I like divs becasue you can nest them without the semantic problems you get doing the same with tables.
So instead of using the body selector you could use something like this in your css:
.yourdivnamehere {
background-image: url(your_image_here.gif);
background-repeat: repeat-y;
background-position: left;
background-attachment: fixed;
}
and in you html:
<div class="yourdivnamehere">Insert your content here</div>
The main difference between DIV and SPAN, is that DIV is a unique element to your page and should not be repeated. SPAN can be apply many many times.
Actually, the main difference between <div> and <span> is that <div> defaults as a block-level element and <span> defaults as an inline element.
Block-level elements create a new formatting context. They are stacked vertically in the order they appear in the source code and may contain any number of other block-level elements or inline elements.
Inline elements do not create a new formatting context. They line up horizontally within their block container in the order they appear in the source code, wrapping to new lines within their block container if necessary and can contain only other inline level elements (or inline text boxes).
Both <div> and <span> are generic elements. Both can be used as many times as you like on a page. They hold no defaults settings (that I am aware of) besides their value for display (block on <div>, inline on <span>).
What tomda probably refers to when he says a div is used only once on a page is the use of IDs. Since a <div> is a generic block level element, they are most often used in CSS design as the main container elements for a layout. When used this way, most designers apply a unique ID to each <div>, and then attach styles to that ID in the CSS...
html:
<div id="header"><?div>
<div id="content"></div>
<div id="sidebar"></div>
css:
#header{
PROPERTY:VALUE;
}
#content{
PROPERTY:VALUE;
}
#sidebar
PROPERTY:VALUE;
}
Note, however, that this same thing can be done with the <span> (or ANY other) tag if you have a single chunk of inline text that you want styled in a particular way. It's the use of an ID that makes the element unique, not the element itself. (To use the same styles on more than one element, apply a CLASS (<div class="box">) to the element tag and define the CSS using the dot(.) selector (.box{width:100px;}).
cEM
