HELP: I want to replace the title of my forum with an Image

Get Started
1

I’ve Googled around for hours and because there are so many interchangeable terms for “title” “header” etc. it’s driving me crazy trying to find the simple answer. I am a complete newbie to web design so I apologize for the overly simple language.

My forum I just made is here: http://www.goldcoastforums.com.au

Basically all I want to do is replace the white empty header space and the black line underneath with this image:

i’ve tried a ton of different things i’ve read and I know it should be something simple but it’s driving me up the wall :evil:

I got to the point where I could put the image in, but it should be large enough to cover the entire white area and fit behind the blue forum buttons, like in this picture:

Any help would be greatly appreciated, cheers :smiley:

2

One option might be to remove the background image from the <body>, then remove the #header-wrapper div, and in its place paste code like this:

<img style=“width: 100%;” src=“http://www.goldcoastforums.com.au/styles/staticblue/theme/images/header2.jpg”>

OK, that’s not ideal, but this layout hasn’t been designed to do what you want, so to do it properly would require some major surgery.

The menu won’t sit over the image, but that could be fixed (next round, perhaps).

3

There are several ways you can set the background position.

So you’ve got your

div#whatever {
    background-image: url(/picture.png);
    background-color:white;
    background-position: [options go here] ;}

Your options are:

[list][]left/center/right top/center/bottom
[]percentage values
[*]absolute values[/list]
Left, right, top, bottom and center are all pretty obvious.

Percentage values are simple enough to visualise but harder to explain, so I’ll try with a picture:

345×163 786 Bytes

The black outline shows the outline of a <div> with
{background-position:30% 10%;}
The horizontal point of the image 30% in from the left is lined up with the point 30% along the div, and the vertical point of the image 10% from the top is lined up with the point 10% of the way down the div.

Another way to look at it is that if the div is bigger than the image, you divvy up the white space so that (with the above positioning) 30% of the horizontal gap goes to the left of the image (and so 70% to the right), and 10% of the vertical gap will be at the top of the image (and so 90% below). Alternatively, if the image is bigger than the div, 30% of the hidden overflow will be to the left, and 10% of the hidden overflow will be above.

4

I assume you are asking about CSS 2.1 rather than the non-normative CSS 3.x, well like most things within CSS are there are various ways to position a background image.

Though you’d probably want something like: background-position: center; within that CSS block where you applied the header image to the body. Depending on how accurate you want to be: http://www.w3.org/TR/CSS2/colors.html#propdef-background-position Obviously depending upon how large your image is (or the visitors browser window) in the first place will effect things.

5

Thanks for the input. Is there any way you’d be able to give me an example of the raw CSS I would need to make this happen and between what tags to put it? As I said I am pretty much a newbie to these things, my specialty is marketing, not web design or programming :blush:

6

Background image scaling is part of the draft CSS3 spec, but that isn’t a lot of use today as few (if any?) browsers support it. A better plan until CSS3 becomes widely adopted* is to make sure that any text included in the graphic remains on screen even when the image is cropped (ie as you reduce the size of the window). Remember that you can position the background image so that it can centre the image on whatever point you want - it doesn’t all have to be cropped from one side.

  • Let’s put it this way - if you’re still at school, it’s odds-on that you will see CSS3 in widespread use at some point in your life. If you’ve got grandchildren, it’s unlikely.
7

Is anyone able to PLEASE help me with getting the image to scale the size with the browser window? At the moment whenever you scale the window it just cuts off the image :frowning:

8

While I believe what you’re saying is most likely true, I have no idea how I would do that :goof:

I was able to get rid of the black lines by photshopping them out but still having no luck fitting the image to the full size of the screen :blush:

9

If you want it to look like that screenshot you will most likely have to edit the CSS files and create a ‘background-image’ within a division rather than inserting an actual IMG. Unless you just want rid of the white-space and aren’t too bothered about the blue buttons covering the image.