SiteGrinder 3 Q&A: Backgrounds

Here are some interesting questions from our support archives about backgrounds in web pages and parts of web pages:

I am having trouble getting sitegrinder to do what I want to do with my backgrounds. Could you please help me figure out how to get my background to flow accross the whole screen. I also like [when] the background, header and footers all automatically adjust to to whatever screen size being used. I’d also like to know how to get an image to fill the whole page as a background.

Our SiteGrinder website uses the browser-background hint to have its header tile left and right with a pattern, here is some more information on that. Same goes for the footer as well, that just repeats left and right. The way that is grows (or shrinks) depends on the content, but that has to do with a -footer and a -column hint. Here’s some info in our wiki.

As for an image that resizes to fit the screen, that will require extra coding that SiteGrinder unfortunately does not support, but what SiteGrinder does not do, we give you the option of adding that through our external media hint (-xmedia) or embedding the code right into your design (-embed). I would do a Google search to figure out what script is being used for a resizing image on the site that you saw.

I am using SiteGrinder 3 and trying to learn how to change the Browser background to a certain color.

Most SiteGrinder methods for setting background colors are used in conjunction with the Color Overlay layer style.  SiteGrinder takes the color chosen for the layer style as the color choice, not the original color of any of the content pixels of the layer.

This means the color of the pixel content of these layers doesn’t affect the outcome on the built web page.  The layer content does affect your ability to preview what your page will look like in a browser before you build, however, so we recommend using that to your advantage.  If a layer employs a hint along with the Color Overlay layer style to specify the browser background color, for example, you should fill the entire layer and position it at the bottom of the layers palette for an accurate preview.

Using the opacity setting within the Color Overlay style settings is not supported and the opacity should always be set to 100%.

Is there any way I could do a background SiteGrinder with a separate footer area that has a different background? I know I could do a -browserbackground with this pattern, but how could I get the footer color to go to the bottom every time with different page lengths?

That kind of background is super easy to do with SiteGrinder. Put everything of the repeated tile but the footer part as the pattern overlay of a browser-background layer and put the footer part of the tile as a pattern overlay for a footer-background layer.

I am a little perplexed about how to have a header and footer expand across the entire browser window and yet place a background image behind the content and not have it repeat horizontally or vertically.

SiteGrinder can only have 1 browser-background layer, this can be a horizontally repeating pattern (to give the illusion of your header expanding), a small tile that repeats to fill your page with a pattern, or just a single image that does not repeat.
Likewise, you can only have 1 footer background. This is less flexible as to what is acceptable than what is stated above.

You can also have individual -background layers for -column or -pagesize layers. Just be sure not to name these with the prefix name “browser” otherwise you’ll run into issues with your actual browser-background layer. If you wanted, you could add some additional fancy background to a -pagesize layer.

Hi, I want to add two background plattern on my page. One background extends vertically and the other background extends vertically and horizontal. Is that possible?

You can only have one browser-background set per page. However, you can have backgrounds for various things, like the -pagesize hint, your footer, and for -column layers and -panel layers. The only background that will really repeat horizontally will be the browser-background layer and your footer. All the others will repeat vertically.

I am hoping to receive some help. I am noticing a gap in build between the footer and browser-background. I have watched SiteGrinder TV training so often I can not even count how many times, and I have download most of your predesign website site and have followed them to the letter and I am still getting a gap in build which is driving me nutts. Can someone please help and see what is it I am doing wrong.

I think you may be misunderstanding what the different hints do. The footer-background will cling to the bottom of the browser window, or come after the content of page (whichever is lower). As the footer moves this will in no way change the behavior of the browser-background layer. So, yes, there can be a gap between the browser-background and the footer-background depending upon your browser window size.

The browser-background is used to make a repeating tile for the browser window. If the layer touches all four sides of the canvas in Photoshop then the browser-background pattern will repeat horizontally and vertically, filling up everything. If the browser-background layer touches three sides of hte canvas, but not the bottom, it will tile horizontally only.

We have a sample file that demonstrates all of these.

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>