CSS question
J_Maxwell
Feb 09, 2005
5:38 PM |
Hello!
I have recently began to implement CSS into a few websites which works really nicely. However, I have a question on one website. This website has an image header with a gradient blue bar onto which the logo and the name of the website is. What I would like to do is expand this bar across the whole screen using CSS. Here is what I have so far:
background-image:url("header-bar.jpg");
background-repeat:repeat-x;
background-position-y: 42;
background-attachment:scroll;
All this is doing is repeating this image (a 1px by 10 or so px jpg) across the header of the screen to the other side. However, when I view it in Firefox (0.8, and 1.0), it only appears at the top of the screen. Is this a Internet Explorer thing only? Or, is it a bug with Firefox? I wouldn't think that it is an IE thing only...
Ideas?
Joseph |
coderfrommaine
Feb 10, 2005
7:57 AM |
Your problem is the quotes inside your url() definition. It should be:
background-image: url(header-bar.jpg);
BTW, why are you using a scrolling background attachement? |
J_Maxwell
Feb 10, 2005
12:02 PM |
Alex,
I'll fix the quotes issue. I basically want to simulate an image behind another image (the image is a bar, and I want it to extend the full width of the screen). Having the background image being 1px should completely eliminate any problems with download time, and then we get the benefit of the looks.
Joseph |
J_Maxwell
Feb 10, 2005
12:04 PM |
Here is the link to what I'm working on:
[HYPERLINK@www.titus2.com]
It didn't seem to fix the issue. Just look at it in IE, and then in Firefox. I wonder if Firefox doesn't accept the "background-position-y: 42;" attribute.
Joseph |
Tex
Feb 11, 2005
12:14 PM |
Considering my monitor is 768px tall, it looks like the header is displaying properly in Firefox for '42' being measured in px. Assuming you want the background to come down to the bottom of, or slightly below the drop down menu, background-position-y would need to be about 200px, by my calculation.
Alternatively, if you have trouble getting IE and Firefox to both bring the background down to the proper position, you could edit your image to be 1px wide by however many px tall you need. I have been working on a webpage recently that has a 5px wide by 700px tall background image that is still less than 1KB. So it is still very small and almost negligible in its download size for dialup and broadband users alike.
HTH,
Jacob
|
coderfrommaine
Feb 11, 2005
2:42 PM |
Ok, I understand what you are doing now. Here is the only code that you should have in your body selector (to do what you want):
margin: 0;
background: url([HYPERLINK@www.titus2.com]) 0px 27px repeat-x;
That works in Firefox - although I couldn't test it in IE. BTW, setting the body to "margin: 0, 0, 0, 0;" didn't have any effect, at least not in firefox. So with the margin actually set to 0 (using "margin: 0;"), everything was further up (hence me using 27px instead of 42px). You might not want that, and in that case, just remove the "margin: 0;" and set the 27px back to 42px.
Alex |
|
Posting in this forum is limited to members of the group: SITEADMINS, SUBSCRIBERS, MEMBERS.]
|
| If you don't have an account yet, visit the registration page to sign up. If you already have an account, you may login here:
|
|
|
Welcome to the Open Forums!!
|
Welcome to the Open Forums!!
|
|
|