Advance Fluid/Reactive Styling for Feature Container Background

[onestandard 0]

Good evening! I'm an unabashed hatchet-surgeon with CSS, but I decided to take a shot at adding a background to the feature box/container: #feature {background:url('http://localhost/wordpress/wp-content/uploads/2011/03/AS-Feature-Background-1b.png') no-repeat 20em 3px;} I have it currently positioned for 1280x800 resolution, but I was wondering if any of you fabulous peeps out there have a suggestion for a fluid/reactive work-around that would allow the position to translate for other resolutions - primarily 1600x900. Thanks in advance for the help.

[bryan-hadaway 3]

I believe this is what you're after: http://css-tricks.com/how-to-resizeable-background-image/ Thanks, Bryan

[onestandard 0]

Hey, Bryan. How would that solution be applied to an element within the #feature div? Toying around with the code it, the positioning changed where the feature box was displayed, but the background was still relatively in the same position as it was before I added it. To illustrate the issue I'm having here are a couple of screenshots taken with my screen set to 1280x800 and 1600x900:

[bryan-hadaway 3]

That's an example of how it might be done, also it was good to show you that this is an advanced customization that you may need to hire a pro for. Thanks, Bryan

[onestandard 0]

See my post title. I recognized it was 'advanced.' =) Any other examples of how it might be done?

[bryan-hadaway 3]

Yes, I understand. I don't think there's an easy answer here. I can buzz the developers and see if they have any other suggestions. But, other then having a pro get hands on I'm not sure. Thanks, Bryan

[onestandard 0]

That would be great, and I appreciate the help.

[cmunns 16]

So as you enlarge the browser window you want the entire content area of your site to grow as well? Generally this would mean a complete css rewrite on all dynamic elements which are set as actual pixel dimensions. You would need to refactor all that into relative units and I'm not sure how tough that would be. This is what you want correct?

[onestandard 0]

Negative, Ghostrider! There are two elements of the layout that are not in the correct position at different resolutions. They retain the same relative size, but get moved over to the left of their position in the native resolution I formatted them in. Those two elements are the feature background I added to the CSS (see above), and the footer background I also added code for. Does that clarify my question? Thanks, Adam.

[cmunns 16]

The css that you added for it. Does it declare `margin:0 auto;` to keep it centered? Do you have a link for us?

[onestandard 0]

Tried inserting it into the code above, but with no result. URL is http://www.annapolissound.com Thanks.

[onestandard 0]

I'm an idjit. Your solution to my other post worked here, as well. Thanks, Adam.