New Skin = Slight Problem? [SOLVED]

[MBrown]

Well okay maybe it's no that new of a skin I have been using it at another VA but recently decided to give Iberworld VA a fresh look.

I'm talking about the wonderful vairline template by Nick Tyson, I think I've made it alright for what I want it to represent with Iberworld's look.

Would enjoy any opinions etc of course I know my likes aren't the same as a lot of people. I'm still having a play and getting things right so it's not a definite look yet.

Links etc aren't all done yet, only really got the fleets page updated thanks to Mr. Mitchell for that great mod.

As for the problem, I'm not sure how exactly to get the background to well, be one big image. It's currently repeating 3 times since if I just have it once there's a huge white gap underneath.

Firstly, I can't see any options or how to get it as one big image. Or failing that I thought I could fill the whiteness in one colour but I can't see anymore #FFF or places to do it.

Here is the code, if it helps.

@charset "UTF-8";
/* CSS Document */
body, html {
font: 12px/120% Helvetica, Arial, sans-serif;
background-image:url(img/body_bg.png);
background-repeat:repeat-z;
background-position:absolute;
color: #00458C;
font-weight: 400;
margin: auto;
padding-top:25px;

Thanks and look forward to your views and help!

[edmundk]

It's repeating 3 times because the image is too small for the page. The content on your page is making the page extremely long. I would suggest making a bigger image or taking some of the content off. I'm not sure if it's the best solution, but it is something that i would do as your image is not really repeat-able.. Correct me if i'm wrong.

Thanks,

Edmund K.

[Sava]

Try:

background-repeat:no-repeat;

Though I am not sure as I am not that good at CSS. That will probably only make it appear once but not stretch it out.

[MBrown]

.The image isn't exactly small though sizing up at 1920x1080, what would be really helpful is somesort of code so that the background stays glued but the main box keeps scrolling.

Thanks Sava I can get it to not repeat, just when I do make it not repeat its white at the bottom :/

P.S. I can never really tell as my screen resolution is 1920x1080 anyway lol

[MBrown]

Ok hang on! Mayy have just fixed this, looks better now

Thanks Sava added you code along with another to fix it. My code is now:

body, html {
font: 12px/120% Helvetica, Arial, sans-serif;
background-attachment: fixed;
background-image:url(img/body_bg.png);
background-repeat: no-repeat;
background-position:absolute;

Thats glued it

background-position:absolute; was all I was missing.

Would still love opinions

[Sava]

For me it is still repeating vertically.

Also, you had the absolute position statement in your original code. Check above^.

You can maybe try using:

background-size:contain;

or

background-size:cover;

Again, I am not any good at CSS so it will be a trial and error process.

[MBrown]

Hmm okay thats odd i see it fine in firefox and ie with my resolution.

Using :contain I get a huge margin to the right of whiteness.

Using:cover I see no difference for mr but have left it there incase you see it better.

[Sava]

It is OK for me now also! I guess I was seeing the cached version last evening. Glad it worked out! Sorry for the trouble I caused.

[MBrown]

No worries cheers Sava you helped! You were going along the right track