6 replies [Last post]
Jesica
Offline
Regular
Last seen: 5 years 7 weeks ago
Timezone: GMT-7
Joined: 2009-06-20
Posts: 16
Points: 0

I am VERY new at using CSS, so I apologize if this is a silly question.

I want to use my External Style sheet to add:

1) Background image that tiles. (Successfully done.)
2) A "header" image that sits at the top, center of the page, relative to the window size.
3) A "footer" image that sits at the bottom, center of the page, relative to the window size.

Can I do this? The solution I keep seeing is to add a background image with no repeat, but that would imply I can only add one image with an external style sheet. Is this true?

billf
Offline
Regular
Last seen: 5 years 10 weeks ago
Joined: 2009-06-18
Posts: 22
Points: 0

Hi Jesica, Any element can

Hi Jesica,

Any element can have a background image. Say you've got an HTML document whose body looks like this:


    <div id="header">
        Header stuff
    </div>
    <div id="content">
        <p>Text and stuff</p>
    </div>
    <div id="footer">
        footer stuff
    </div>

Then you could put header and footer images in like this:

#header {
    background-image:url(/path/to/header/image.jpg);
    background-repeat:none;
}

#footer {
    background-image:url(/path/to/footer/image.jpg);
    background-repeat:repeat-x;
}

There are lots of different ways to do it. The image itself, as far as I know, can't be sized "relative to the window size." But the element with the background image can be positioned relative to the window size.

Actually, it appears that people have found ways to size images relative to the window size:

http://css-tricks.com/how-to-resizeable-background-image/

See this for something that's less advanced:

http://www.w3schools.com/css/tryit.asp?filename=trycss_background-image

Cheers,

--Bill

Jesica
Offline
Regular
Last seen: 5 years 7 weeks ago
Timezone: GMT-7
Joined: 2009-06-20
Posts: 16
Points: 0

Getting closer....

Ok. That's closer.

Instead of adding the text with the background element to the HTML page, can I add to the Style Sheet?

For example, the header image is also the image behind the menu. If I can add the menu links in front of the image in the style sheet, when I want to change the menu, I only have to do it to the one page instead of every page.

I guess I am looking for an alternative to "include page."

Jesica
Offline
Regular
Last seen: 5 years 7 weeks ago
Timezone: GMT-7
Joined: 2009-06-20
Posts: 16
Points: 0

Alignment

AND, silly me, I can't figure out how to set up the alignment for the background image. I thought this should work:

#header { background-image:url("images/Header.jpg");
    background-repeat:none;
    width: 813px; height: 194px;
    align="center";
    vertical-align="top"; }

The width and height does, but the align and vertical align do not. Sad

L0LKTHXBYE
L0LKTHXBYE's picture
Offline
Enthusiast
Nederland
Last seen: 5 years 5 days ago
Nederland
Timezone: GMT+2
Joined: 2009-06-11
Posts: 98
Points: 0

align="center";

    align="center";
    vertical-align="top";

Because that's not CSS : ) That's HTML styling from Ye Olden Days.

#header {
background: url(images/Header.jpg) 0 50% no-repeat;
width: 813px;
height: 194px;
}

The property you're looking for is called "background-position:" and you list two coordinates. The first is horizontal (left to right) and the second is vertical (top to bottom). While you are allowed to mix names and numbers, there's an old browser that can't deal with that, so many of us remain trying to keep names with names and numbers with numbers.
If you use names, you can go out-of-order:
background-position: bottom right;
but with numbers it's always horiz/vert:
background-position: 20px 50%;
is 20px from the left of the container and 50% (half-way) down.

The specs say that if you only list one coordinate, the other one is supposed to default to "center". If you don't list anything, they default to 0 0 (top left corner). In IE, if you only list one coordinate then it gets confused.

You really might want to get a CSS book with something in the back for looking stuff up. I still do this for the more obscure text settings myself. I got "HTML Utopia: Designing Without Tables Using CSS" by Rachel Andrew and Dan Shafer. It's old enough to be sitting in your library, and the back part (appendix c I think) is a bit invaluable.

Jesica
Offline
Regular
Last seen: 5 years 7 weeks ago
Timezone: GMT-7
Joined: 2009-06-20
Posts: 16
Points: 0

ugh!!!!

I got that from a book!!!!! Bugger man! I'll check out the one you suggested.

L0LKTHXBYE
L0LKTHXBYE's picture
Offline
Enthusiast
Nederland
Last seen: 5 years 5 days ago
Nederland
Timezone: GMT+2
Joined: 2009-06-11
Posts: 98
Points: 0

Yeah sucks that people who

Yeah sucks that people who don't understand CSS write books... my colleague has this book called the XHTML Bible (Bible series) and it's full of absolute garbage, published in 2004. Really sad.

The book I recommended has everything in XHTML and likely some other little nitpicks I don't remember anymore. But it gave me a good enough basis to learn further online.