I want to have a few images on my website that stretch/tile to the edge of the browser window. I can do this by tiling the background image, and setting the image I want to stretch to “width can grow”. However, this only works when the site is set to “alignment - none” as far as I know?
Is there some way I can have a center aligned site with images tiling to the edge of the browser window?
Here is an example of what I’m waffling about. Look at the purple gradient header bar, or the black footer bar.
The simplest solutions are to either create a background image far bigger than will ever be seen to cover any window size increase, or create an image that tiles horizontally but is much taller than is needed to fill window. Photoshop is normally used for this, but any image editor will do. Going this route the image doesn’t actually enlarge as it is already large, just not completely visible.
If I make the background ridiculously wide, and I make my image just as wide, the website will scroll horizontally won’t it? I don’t want that to happen.
I’m not sure what you mean in your second method? How do I make an image tile horizontally? As far as I know, the only ways to do this are to use a background image, or to check the width can grow box (which can’t be done in center aligned sites)?
If I make the background ridiculously wide, and I make my image just as wide, the website will scroll horizontally won’t it? I don’t want that to happen.
No, it won’t. A true background image, the kind that Walter has just been talking about, has no effect on the site at all, is not separately selectable, and doesn’t affect anything else. The only way your site would scroll in this scenario is if you put a huge background image in a graphic box on the page, but then it wouldn’t be a real background image.
If I make the background ridiculously wide, and I make my image just as wide, the website will scroll horizontally won’t it? I don’t want that to happen.
If it’s a true “background” image as opposed to a graphic on the page, then no it will not scroll horizontally.
I’m not sure what you mean in your second method? How do I make an image tile horizontally? As far as I know, the only ways to do this are to use a background image…
Exactly right. This is what i’m suggesting. Make it a true background, then put all your content on the page above the background.
If you attach a real background image to the page, you can set the tiling independently on the horizontal and vertical axes. You can also set the image to not tile at all, to center vertically and/or horizontally, or most combinations of these.
Try this, to make a fading background on your page.
Create an image that is 25px wide and 500px tall. Fill it with a vertical gradient from dark to light (hold the shift key down in Photoshop when you draw the gradient to force that to be perfect). Make note of the hex number of the color at the very bottom of the image. Export as PNG or GIF (JPEG has nasty color shifts that you won’t be able to deal with).
In Freeway, click somewhere on the pasteboard, so nothing is selected. Click on the second tab from the left in the Inspector, and open up the Background segment. Use the Background Image picker to navigate to the image you made in step 1.
Set the tiling to horizontal, and position to top, left. Your gradient should swoosh across the top of the page. Now set the background color to the same hex value as you recorded in Photoshop. Perfect transition from image to background color, and your image doesn’t have to be so large for you to have a sweeping effect. This is precisely how the Slash site works, by the way.
Preview in a browser, and stretch the window around.
You are now free to create the rest of your page over the top of this. You can leave the alignment of the page to None, set percentage widths on the foreground elements on the page, and you get a seriously nice effect for little effort and very little file size.
I had the background gradient done, that’s no problem. For instance, I could make the purple gradient on the slash site no problem, but how do I then make the purple header bar to stretch across the browser window?
I can do it by making it ridiculously wide, which leads to horizontal scrolling. Or I can leave the page alignent at none and set the purple bar to “width can grow”. But when my page alignment is set to none, everything jumps over to the left of the screen.
How do I leave the page alignment on none but still have everything dead center like in the Slash site? And how do I set percentage widths on all my elements?
If you make the purple bar a part of the background image, that part
(the horizontal scaling) will come for free. Take a look at the image
that forms the top of the Freewaytalk Web forum:
That image forms the header bar and its shadow in one image. If that
image was taller, and had a bit more gradient under it, then it would
be exactly like the Slash site.
If you go to the My Account page on Freewaytalk, and set your display
preferences for a wider screen there using the Page Width setting, you
will see that the header “expands” to fill the new page size. All part
of the magic of using background images.
There’s another image floated above that slice which has the logo on
it, and it’s precisely matched vis-a-vis color and dimensions, because
I made both images in the same Photoshop document, and used the
slicing tools to snip off one end to make the horizontally-tiled image.
If you wanted your header to have defined edges – to not touch the
sides of your browser window – then you would add two more images
that used the same trick as the logo, only in reverse. These two
images would “cover” the tiling image by being positioned absolutely
in the top-left and top-right corners, and by giving them some header
bar ends on a swatch of background color or gradient.
The stacking order is only an illusion. In the end, it doesn’t matter
if you put a piece of background texture over the top of a foreground
image or cut a hole in that same foreground image. Once it hits the
screen, there’s no way to tell how it was done.
Walter
On Apr 16, 2010, at 2:12 PM, Colm Tuite wrote:
I had the background gradient done, that’s no problem. For instance,
I could make the purple gradient on the slash site no problem, but
how do I then make the purple header bar to stretch across the
browser window?
I can do it by making it ridiculously wide, which leads to
horizontal scrolling. Or I can leave the page alignent at none and
set the purple bar to “width can grow”. But when my page alignment
is set to none, everything jumps over to the left of the screen.
How do I leave the page alignment on none but still have everything
dead center like in the Slash site? And how do I set percentage
widths on all my elements?
I see. So basically, your saying that purple header bar on the slash site is part of the background gradient? What abotu the black footer? Is that part of the background too? What if I wanted to move the black footer up or down along the page, this wouldn’t be possible as it would be part of the background?
The page has a background, but so does every other HTML layer element on the page, potentially. You could place an HTML box at the bottom of your page, pin it to the bottom with absolute positioning, set it to 100% width, and assign IT a tiling background image. The backgrounds that you apply to these HTML elements will sit above the master page background in the overall stacking order.
Oh I get you now, I think. So let’s just say I have my background gradient in place. To make my purple header bar, I place an HTML box on the page, set it to 100% width, and import a tiling image into it?
If I’m right so far, can you tell me how to set the width to a percentage? And how do I assign a tiling background image to an HTML box?
You don’t actually have to do this for the header, but rather for the
background. You can build the header image into the page background,
since it’s never going to move vertically. But the footer image you
want to “pin” to the bottom of the screen, so you would place that
tiling image in an HTML box that you can drag around the screen in
your design view.
To apply a tiling (or not) background image to an HTML box, simply
select the box (so the 8 drag handles are showing) and then look in
the Style tab of the Inspector (second from the left). You’ll see the
same set of controls there that you can apply to the page. If you
don’t, then look on the left-most tab of the Inspector, and verify
that the HTML box is set to be a Layer there.
Walter
On Apr 16, 2010, at 2:57 PM, Colm Tuite wrote:
Oh I get you now, I think. So let’s just say I have my background
gradient in place. To make my purple header bar, I place an HTML box
on the page, set it to 100% width, and import a tiling image into it?
If I’m right so far, can you tell me how to set the width to a
percentage? And how do I assign a tiling background image to an HTML
box?
I have my background setup, header built into the background and it tiles horizontally. I’m having problems with the footer though. I made a HTML box 30px x 50 px, put my image into it, set it to tile horizontally and pin it to bottom, but its just a 30 x 50 box when I preview the site.
Click once on the box. In the Inspector, locate the width property in
the left-most tab. Double-click into that field and type 100% and tab
out. The box should immediately fill the entire width of your page.
Note that if you have set your page to center or another alignment
than none, the footer will be constrained by the width of your page.
If you want to have both a full-width page header and footer and a
fixed-width content area, then you’ll need to build the middle of your
page using an inline construction method. I just posted something more
about that on another thread this morning.
Walter
On Apr 21, 2010, at 8:13 AM, Colm Tuite wrote:
How do I do that? Forgive me for annoying you with my simplicity!
Yeah I guess that’s what I need. I was wondering, I tried resizing to 100% but my html box just reduced to 30px (the width of my background).
I’ll have a look at that thread. Am I right in saying this page would have been made with inline construction, since you have a full width header and footer?
