Full bleed with images in div

[Matt]

I have a masthead/banner on my site which uses a full bleed across the
top of the page. It currently works the old school way: tables, single
pixel gif trick, and some background images. I'm throwing that out and
going full CSS. Or at least I'm trying.

I tried using Blueprint for the banner layout, but for the most part I
can't because the 950px prevents the full bleed on the right side. So
instead I'm using my own divs for the banner and then Blueprint for
page content. However, for some reason I can't get all my banner divs
to go the full width of the browser window. Divs with only a
background color seem to go the full width just fine. But divs with
background images are stopping at 950px, even though I'm not using
Blueprint classes on them, their parent divs, or the body. (For
clarity, each div is supposed to span the full page width, in a stack.
Some divs have background images, some do not.)

Ordinarily I would see this as a pure CSS issue and wouldn't ask here
but it's stopping at 950px, so there is definitely some conflict with
Blueprint, I'm just not understanding it.

Any input or ideas would be appreciated!

Thanks,

Matt

[NLA]

Hi Matt,

I'm not sure if this helps much but the CSS class "container" which
almost everything in Blueprint will sit in has an absolute width of
950px. That means that even if one of the child elements of container
is set to "width: 100%" it will extend to 100% of 950px.

Hopefully that gives you a starting point in finding the issue!

Nathan

[Lukie]

Good evening Matt,

It was foretold that on 06/05/2008 @ 14:59:58 GMT-0700 (PDT) (which
was 18:59:58 where I live) Matt would write:

<snipped a bit>

M> I have a masthead/banner on my site which uses a full bleed across the
M> top of the page. It currently works the old school way: tables, single
M> pixel gif trick, and some background images. I'm throwing that out and
M> going full CSS. Or at least I'm trying.

M> I tried using Blueprint for the banner layout, but for the most part I
M> can't because the 950px prevents the full bleed on the right side.

The container in BP is set to 950 px, so everything in the container
will only stretch that far.

Using a masthead/banner... that stretches the whole viewport you might
try to set the image on the body:

body {

background-image : url(path to your image);
background-repeat : repeat-x; <---- if needed, see comment below

}

By default, if you add a single, non-repeating background image to the
page, it will appear in the top-left corner of the viewport.

If it's a repeating image you want to use that needs to tile from
left to right, you use " background-repeat : repeat-x;"

Add these styles to your custom css sheet and see if it resolves your
problem...

That is, if i understood your problem the right way....

--
Best regards,
Lukie

-------------------------------------------
Using the best e-mail client: The Bat! version 4.0.18 with Windows XP
(build 2600), version 5.1 Service Pack 2 and using the best browser:
Opera.

"Diplomacy - the art of letting someone have your way." - attributed
to Daniele Vare.
--------------------------------------------

[Matt]

Thanks for your reply Nathan. My masthead lives outside of the
blueprint container, or at least that is my intention. Obviously
something unintended is going on there though. My container doesn't
start until farther down the page, and looking through screen.css the
only classes I saw that mentioned 950px specifically were .container
and .span-24, neither of which am I using in the masthead divs,
elements, or parents, including the body. So I'm stumped. I think I'm
going to work around it and move on.

[Matt]

Hi Lukie. Thanks for your help. I'm basically trying to segregate my
content into a non-container and container portion. Since the masthead
isn't explicitly in the container I assumed it wouldn't be affected.
Even stranger, only the divs with background images seem limited.

I like the idea of going with a background image for the banner and
letting BP do whatever it is going to do. I had ruled that out early
on because of the way the original banner was assembled (from HTML and
bear skins with stone knives), but if I left BP managage the text
portion of the masthead and throw everything else on the background
that should work just fine. I was over-thinking it. Thanks for the
idea.

Matt

[Matt]

I said managage. :) That's what I get for working past midnight.

[Lukie]

Good morning Matt,

It was foretold that on 09/05/2008 @ 00:26:59 GMT-0700 (PDT) (which
was 04:26:59 where I live) Matt would write:

M> I said managage. :) That's what I get for working past midnight.

We all know that feeling lol

--
Best regards,
Lukie

-------------------------------------------
Using the best e-mail client: The Bat! version 4.0.18 with Windows XP
(build 2600), version 5.1 Service Pack 2 and using the best browser:
Opera.

"Men and women mix just like vinegar and water. That is why you need
to keep mixing them. Otherwise, they will separate." - Alan Alda
(1936-) - US actor
--------------------------------------------