Main Page Background Image Dimensions

My main page background image file size dimensions are way off:

www.americanfootballfilms.org

The artwork ends half way through the scroll. What is the best way to fix this? I don't mind re-doing the artwork. Can someone please tell me what the dimensions of the artwork should be?

Thanks.

Try following css code which will make it full page background. Add the code in override.css and enable css override from template settings > advanced settings css override.

Code: Select all

body {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position:fixed;
}


Not sure if I followed NormanUKs guidance above correctly:

1. I copy and pasted the code provided to the "css/override.css' in template "gk_league_news". Specifically, I added the code to the bottom of the code that was already in place, two spaces below the last line which reads /* Here you can include your override CSS styles */.

2. After that, I changed the gk_league_news - Default settings in Template Manager (advanced settings) from "off" to "on".

When I viewed the site after these two steps, I noticed no change to the background image at all.

Not sure if I was supposed to add the new code to the top of the code already in place or below it, or somewhere withing the text of the existing code. Or, replace the code/text that was already there. So, I just put it on the bottom.

I should also mention that the width of my current background artwork (apart from the length) is a bit short and does not extend to the full lengths of the left and right boundaries of the page which leaves visible a blue background underneath as a result. About this, my instinct is to re-do the artwork with different width dimensions, at least.

www.americanfootballfilms.org

Thanks NormanUK for your post.

I cannot see override.css getting loaded in your site. Double check it is enabled in Advanced Settings.

Thanks for your reply, NormanUK.

After it didn't work the first time, I set everything back to how it was.

But now after your message here, I repeated the steps...

1. I added the code as your previously explained, and

2. I enabled css.overide.

For sure at this moment, css.overide is enabled.

www.americanfootballfilms.org

Thanks again.

Try below code

Code: Select all

body {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment:fixed;
}


And remove !important from style1.css line 16 which is end of below css

Code: Select all

body {
    background: url("../images/style1/bg_main.jpg") no-repeat scroll center 0px, url("../images/style1/bg_pattern.jpg") repeat scroll 0 0 transparent !important;
}


See you around...

The code change and override worked, which is to say they took affect (thank you).

But, I'm not sure the result is a permanent solution for me since the changes to the codes and override simply caused the template to zoom in on my artwork to fill the entire page...resulting in artwork loss.

Is this what the changes were meant to achieve?

If so, I think I would prefer to redo my artwork in new/correct dimensions in order to fill the complete page from top to bottom, left to right.

To save on page speed (correct me if I am wrong) but I can completely remove from my artwork the portion of it that would be covered up by the main page itself which should result in an overall smaller file size. In other words, my artwork would be made to serve as a border.

Thanks again.

Thanks again.

if you use below code with 1680×1050 pixels image size so depending on monitor it will scale to 1920x1080 or reduce to 1440 x 960 keeping aspect ratio with no scrolling.

See you around...

Not sure I understand what you mean:

You wrote above "if you use below code" but yet there was no additional "below" code provided outside of that which you previously provided (above).

If you mean that I am to use the same code as you provided earlier with an image pixel size of 1680X1050...this is what I have done....and the template did not maintain aspect ratio of the background and with no scrolling.

www.americanfootballfilms.org

Your css code in override.css is missing following css

Code: Select all

background-attachment:fixed;


So please amend your css as below.

Code: Select all

body {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment:fixed;
}


See you around...

Much better (thank you) but the length of my background image is now significantly shorter about which you commented earlier would happen. I believe the code changes have reduced my image to 1440 x 960 while keeping aspect ratio with no scrolling. In this case, I will have to redo my artwork so that my images (particularly the player on the left side) is not partially viewable as he currently is. Or, I would like to ask, if there is a way to achieve a partial scroll so that my image scrolls but only to the point at which the length of the artwork ends?

www.americanfootballfilms.org