How to create a container with stretchy background

Question

I would like to make my site to have the similar style of these sites:

http://www.darbym.com/

http://www.jenarmstrongphotography.com/

I want everything to be inside a container and the background image will be stretchy.

This image shows what I would like to achieve.

Can I just create a simple box that has all the contents of smugmug inside it? I really have no idea where to start, and when I search I don't know if I am using the right terminology.

Thanks

Stephen

Answer 1

There are two types of "stretchy" that a SmugMug site can exhibit (in general). These are:

1) The actual contents of the page (i.e. the text, etc) expand to fill the entire screen (so that you make the most use of the available screen real estate, depending on a visitors screen resolution).

2) A stretchy background image, that essentially looks the same regardless of the visitors screen resolution.

The examples you provided show Option #2, with the background image repeating in a seamless fashion. The trick to doing this is fairly simple - you choose a background image that can repeat and still look good (i.e. a pattern/texture). In the second website example you provided, the background image can be seen here:

http://jenarmstrongphotography.smugmug.com/Other/Customization-Files/bg/1036725198_g4jyL-O.jpg

The code they used to call that background image was placed in the Advanced Customizer > CSS section, and looks like this:

body { 
font-family: 'Josefin Sans Std Light', arial, serif !important;
font-size:16px !important;
color:#333333 !important;
background:#FFFFFF url('http://www.smugmug.com/Other/Customization-Files/bg/1036725198_g4jyL-O.jpg') !important;
}

So, this background image will repeat as many times necessary both vertically, and horizontally - to fill all available space. And because it's a pattern/texture, the visitor will not really be able to tell that this is occurring (and it will give it the effect of being the 'perfect' size).

The other pieces of their site are just the standard Homepage Layout boxes (i.e. Single Photo/Video, Galleries, etc) that have been customized through the Advanced Customizer.

If you're looking to do this, I'd strongly suggest using Firefox with the Firebug plug-in, as reverse-engineering will be necessary to figure out what's styling each element on your page.

And in addition to stackexchange, you can also find excellent customization resources on dgrin:

DGrin Customization Forums

Answer 2

You'll need a tool such as Firebug for Firefox to look at which div ids/classes you'll need to modify to create that look. On your Homepage, for instance, you'd need to add:

#homepage {background:#ffffff !important;}

Other pages will require additional adjustments - but you'll need something like Firebug to be successful at this.