• OzzModz is no longer taking registrations. All registrations are being redirected to Snog's Site
    All addons and support is available there now.

Full background with fluid width?

Max Taxable

Max Taxable

The Wyatt Earp of Anti-Spam
So...

After working helping several people who use large background images with their sites , I decided to investigate and see how many people really surf my own site using wide width. (I never do, my browser is about 1200x900 resolution so I can still see my desktop icons.)

I have statcounter, and it breaks visitors down by this category. I studied the stats and I was shocked to learn that the majority of people who browse my sites use their browser full width - whatever their screen allows. This is probably true most anywhere, since I am seeing the large background images more and more all over the web these days.

Deciding to join the 21st Century at least in this regard, I decided on installing a BG image on my site. I designed a new single image header banner to match the theme, which is a large US flag positioned so that most of the blue of it is to the viewers left - like the political spectrum in this country - and most of the red is to the right.

And thusly I wound up with this, which I like and surprisingly my membership does as well:

myimagehost


Here's a live look: US Messageboards - Opinion, News and Information


The rub is, I had to make the tables and header fixed width to make this look right. THE QUESTION:

Is there a way to make the BG fluid, let's say such as - the tables and header set at 75% width, and the BG set at 100%?

CSS tricks for this?
 
Last edited:
Max Taxable said:
So...

After working helping several people who use large background images with their sites , I decided to investigate and see how many people really surf my own site using wide width. (I never do, my browser is about 1200x900 resolution so I can still see my desktop icons.)

I have statcounter, and it breaks visitors down by this category. I studied the stats and I was shocked to learn that the majority of people who browse my sites use their browser full width - whatever their screen allows. This is probably true most anywhere, since I am seeing the large background images more and more all over the web these days.

Deciding to join the 21st Century at least in this regard, I decided on installing a BG image on my site. I designed a new single image header banner to match the theme, which is a large US flag positioned so that most of the blue of it is to the viewers left - like the political spectrum in this country - and most of the red is to the right.

And thusly I wound up with this, which I like and surprisingly my membership does as well:

myimagehost


Here's a live look: US Messageboards - Opinion, News and Information


The rub is, I had to make the tables and header fixed width to make this look right. THE QUESTION:

Is there a way to make the BG fluid, let's say such as - the tables and header set at 75% width, and the BG set at 100%?

CSS tricks for this?
Click to expand...
Disregard the following.... it works but the background won't slide with page, it just sits there at 100%
I always used it for a repeating pattern background with the logo transparent placed inside a table cell.

Try using the logo as the background for the table. Don't put the logo in the table. If you need, I'll throw one together so you can see what I'm talking about.
 
Last edited:
A fullsize background like you have in the screenshot there with a transparent logo image would probably work best. That way, you can have the logo scroll away with the fixed background showing through and lose the hard side lines of the logo. The "fluidation"(< New word, I claim it) of the background is a piece of cake.
 
replicant said:
A fullsize background like you have in the screenshot there with a transparent logo image would probably work best. That way, you can have the logo scroll away with the fixed background showing through and lose the hard side lines of the logo. The "fluidation"(< New word, I claim it) of the background is a piece of cake.
Click to expand...
I'd updated this not long after the first post of this thread, more than a year ago. I have this much more simple BG thing going now:

US Messageboards - Opinion, News and Information

The header image scales automatically according to resolution of the browser though.
 
Just for the hell of it to stretch a background across the screen and have it show that way no matter what use the following css code:

Code: 
-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover

:)

That is what I have on my adult site. The background holds the same no matter what browser or resolution your screen is :)
 
You must log in or register to reply here.
Back
Top