Layout of header images, in relation to screen size. Keeping things relative

HTML & CSS
1

Hi

I’m working on a website, (demo at www.mariodecristofano.com/vrtraining1/) which has been decided by the client, to be ok. The client wants to emulate the header graphic (Union Jack flag) at http://www.veteransretreat.org.uk and has provided me with the orginal graphic (the client owns that website too!) In the new site however, I want the flag to only be as tall as the white space made available for it.

Now I know not to use dirty AP Div’s or tables for this, but looking at the existing site CSS I can see the following addition should work (?) when I add it to my CSS

[B]body {
background-image: url(…/image/motif_test.png);
background-repeat: no-repeat;
background-position:top center;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #ffffff;

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;

}[/B]

But I can’t get it to display anything. It’s like its not reading this bit of CSS or I am doing something dumb (likley).

The CSS for the Veterans Retreat website which I’m trying to emulate is here

The CSS for my VR Training site is here

I’d be terribly grateful of any help anyone could offer, and if there’s something I can do in return, I’d be happy to help

2

Hi Mario

The flag isn’t showing because you have a couple of divs with bg images that are overlaying “main-bg” and “main-wrap”.

3

Thanks, is there a way you would personally recommend to display the flag image then?

4

You might want to try putting a div in that covers that white area at the top and put the background image in that.

5

Thanks Richard, sorry I’m such a numpty, are you saying that I should add a Div within the site, or via the CSS. If I add a Div around the image slider, won’t that just push the image slider vertically down!?

6

Adding a DIV and attempting to insert the flag image (motif_test.png) into that, did as I thought, and moved the image slider down. I know I’m being a tool, I just want to ensure I do this correctly, so it sizes appropriately at different screen res’s and browser window sizes etc, this is my weakness!

7

Presumably you just want that flag image to show in the white area? If so, instead of using a white image on .main-wrap, use the flag image as the background, and set the background color to white.

.main-wrap {background: #fff url(../image/motif_test.png) no-repeat right top;}
8

Thanks Ralph, doing that, (and of course, reverting to my original CSS file and undoing all my other attempts) doesnt appear to do much. It makes sense what your saying but doesnt change anything. Ideally I want to keep the lower half portion blue and just the header white, but still, I can’t get this to work whatsoever…hmmm…?

9

and yes I want the flag in the top right, as per www.veteransretreat.org.uk

10

My CSS adjustment as per your advice is

.main-bg {
background:url(…/image/body_bg.png) repeat 0 0
}
.main-wrap {
.main-wrap {background: #fff url(…/image/motif_test.png) no-repeat right top;}
padding-bottom:20px;
}

11

Im trying to now modify the .main-wrap body_bg2 image, to just be the flag. Now, I thought I’d be able to use repeat-absolute, but I can’t. Whats the best way of making this absolute?

12

I thought I’d be able to use the position element,

.main-wrap {
Position:absolute
background:url(…/image/body_bg21.png) no-repeat;
padding-bottom:20px;
}

13

No, don’t use positioning. It’s horrible, and doesn’t work on background images anyway.

Each of the CSS examples you have above contains errors. Make sure to put a ; at the end of each line. And in post #10 you have styles within styles, which don’t work.

I’ve lost track of where you are up to with this. I still suggest you look at the solution I posted above, which would place the flag image on the white area only.