Dynamic CSS Content

<em>* link to my layout.css code <a href="http://pastie.org/4026483" title="CSS Pastie">http://pastie.org/4026483</a></em>

I use Drupal 7 and have a webpage I'm designing, and was customizing the .css in a few different areas so it would better suit my web content. I have an issue though with large screens.

If I get a screen over like 1400x900 or so, my header's background stops repeating and you have two ugly white spaces outside of the header background.

I'm trying to get the background to be dynamic just like I got my content to be dynamic. (Dynamic meaning the content expands and contracts as I expand and contract my window size.) So whether you have an 1024x768 or 2500x3100, I want the header background to be filling the width of the screen.

I have the Andromeda theme installed and was trying to customize the layout.css, but I don't know how to do it. I will tell you that in the "page wrap" section of the layout.css, I added <code>width:100%;</code> and it caused the content to be dynamic, but this method didn't seem to work on the header, or maybe I put the code in the wrong place.

I've tried and tried again, I can't get this to work. I'd greatly appreciate any help I could get, thanks!

can you post a link to your site please?

Honestly, I can't. IT's setup in a private server testing enviroment, I was supposed to develop and troubleshoot it before it went live. I do have access to all the files for my particular theme though. layout.cc, structure.css etc. See that link in my original post? copy and paste it, it's a pastie with the layout.css file which is where I believe you would make this edit.

That background behind the header and partially behind the slide show, is derived from two images.


body.with-banner {
background: url("/site/themes/andromeda/images/bg-pattern-t.gif") no-repeat scroll center top #F5F5F5;

body.wrapper-body {
background: url("/site/themes/andromeda/images/bg-not-front.gif") no-repeat scroll center top #F5F5F5;
color: #363636;
font-family: Arial,Tahoma,Verdana;
font-size: 12px;
margin: 0;
padding: 0;
}


1. You will either need to make the image wider so on very wide screens you dont see the white background.

2. You can re-layout your html so that you have a 100% div with a black background instead of the images.

For now you can delete the images just edit the #header {}


#header {
background-color: #000000;
margin-bottom: 30px;
}


that doesn't look to bad, but it doesn't go behind the slider. I kind of like that, and it gives you 100% width, but it doesn't match your footer images.

Good luck