CSS - Remove Header Background

Hi everyone,
I'm somewhat new to CSS and so far I have been able to solve everything except for this one problem.

This is code from the styles.css file in the blog that I'm building, now this is a free template that I'm using and there is also a header.php file but that has only php code.

In the frist part of the css file this appears:

body {
font-family: Verdana, sans-serif, Arial;
font-size: 80%;
color: #232323;
margin: 0px;
padding: 0px;
background: url(images/header.png) no-repeat top;
}

The background line is the image that appears as the background for the header portion of the site, and it is 960px X 150px.

Then there's this part:

#header {
float: left;
width: 960px;
height: 156px;
}

Then towards the middle of the code there is this other part which also relates to the header:

.top-header {
float: left;
width: 960px;
height: 62px;
padding-top: 60px;
}

.top-header a {
color: #000000;
text-decoration: none;
}

.top-header h1 {
color: #000000;
margin: 0px;
padding: 0px;
float: left;
width: 960px;
font-size: 26px;
}

.top-header p {
color: #000000;
margin: 0px;
padding: 0px;
float: left;
width: 960px;
}

So the problem I'm having is that I have designed a logo that is about 460px X 100px and I want this to go on top of the already defined background layer above in the body part. I have tried "positioning" and also tried to set it as another background and it just appears all over the place. Also the picture I crafted in photoshop has an invisible background so that only the decorative text of the log shows up, so if I use the background method to insert it, it appears with a white background.

So any pointers on this would be a great help. I have tried researching this all kinds of ways and I'm still not sure what to do

Thanks
Chas.

I had been helped on this board previously with this question for a site I was working on. I am using the same approach on another site to link back to the home page from the internal pages. And for all intents and purposes it is working. However I could/can not figure out how to precisely position where the link starts and ends.

http://www.guestwardho.com/campground_map.html


If, for example, you go to the above page and put your mouse over the header image you will see the link begins at the left edge of the header image. If you move to the right the link 'ends' a little more then half way across the image - at the uppercase 'H' in 'Ho' for reference. Again, this is fine for this purpose/site, but cannot figure out how to control where the link area starts and ends.


Thank you in advance for your assistance.

Hey all,

I have a background image that I want to repeat horizontally at the top and the bottom of a page (below all of the content, not necessarily at the bottom of the screen) that I'm creating, for the Header and Footer.

I would like it to look something like this.

I'm using this code for the background image, for the Header:

body
{
background-image: url(stars.gif);
background-repeat: repeat-x
}

And I'm wondering whether I can include another background image in the "body" code, telling it to repeat horizontally, but at the bottom of the page?

Here is the code that I'm assuming would have to be used:

{
background-image: url(stars.gif);
background-repeat: repeat-x;
background-position: bottom;
}

Can someone suggest to me where this code should go? Could I include it in the "body" css code? Or should I put it below all of the rest of the columns/content code?

Thanks.

Hi all,

I need some help. I have implemented a fixed header on my site, but certain content is scrolling above the header while other is scrolling behind. I would like it all to scroll behind the fixed div's.

I have a div with a background color set, that I want to have slightly transparent. Inside that div, is essentially my entire website. Now if I apply the opacity to the main outer div, all the divs inside inherit that transparency. Any ways to get around this?

The outer Div with the transparency is the "content_wrapper" div. It excludes the header and footer. So the only issue is correcting everything wrapped inside the "content_wrapper" and "content" div. I tried setting the "content" div to opacity: 1; but it had no effect whatsoever.

http://www.area51entertainment.co/index.php?about

The layout I have going is a bit difficult to explain. Here's a diagram..



The area of importance is the header. The content and main head area are centered. The area to the left and right of the header are a <div>. However, as you can see, the background image on the left is different than the one on the right. I'm having difficulty making this work. the images can be stretched horizontally without a problem, but the two sides must meet in the middle beneath the header.

I hope this makes sense.

What I've got to do, I think, is tell the background image of the underlying <div> to stretch to 100%, and make this image 300px wide or so including both sides of the image and a split. The split would hide behind the header. I can't find a method to stretch the background image, though.

Does anybody know of a better way, or a way to achieve this method at all without getting into completely different layouts?

Thanks in advance for any assistance/suggestions.

So I have a design where the background is a large (1400x1100) image that fades into a vertical gradient at the edges.

I've set up the css as follows:

body {
background: #000 url(gradient.jpg) repeat-x;
margin: 0;
}

Here's where I run into my problem...

I've created an empty DIV to hold the large image which will appear on top of the gradient and positioned it absolutely.

<div id="bg_image"></div>

#bg_image {
width: 100%;
height: 1100px;
background: url(images/bg_image.jpg) no-repeat top center;
margin: 0;
position:absolute;
}

This works and the background looks like it should, however because the large image is inside a DIV, any time the browser window is smaller than that div (which will be the case for most users considering the image size) there will be scrollbars.

This makes perfect sense of course I just can't come up with an alternative.

If there was a way to extend a background image beyond the borders of a DIV that would work but overflow:visible; doesn't seem to work with background images only content.

I wish I could set a repeating background AND a static background in the body style, because that is exactly the effect I'm trying to achieve.

Any suggestions would be greatly appreciated!

Thanks,
Josh

I'm working on a custom MovableType site for a sports news company, and after including FCKeditor into the backend to allow for more freedom in styling, etc, I've found that the css styles for the blog entries and the output from the editor just don't mix. Is there some way I can clear all the inherited css definitions and just let the text display as itself?

How can I remove the space between an image bottom and a td in Mozilla?


<!DOCTYPE html
PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head><title></title>
<style type='text/css'>
td,img { padding:0px; border-width:0px; margin:0px; }
</style>
<script type='text/javascript'>

</script>
</head><body>
<table border='1'><tr><td> <img src='http://www.kallery.net/Q_strg/kallery/85_153_1_1155924038.jpg' /> </td></tr></table>
</body></html>

I'd like to be able to remove all unused css styles on a website and the FireFox add-on "Dust-me Selectors" is highly recommended, only that it doesnt support FireFox 4 which is what is installed for me at the moment, can you please confirm if I can have more than 1 instance/version of a web browser/FireFox on my machine, or if you could recommend another way of finding unused css on the whole of a website, and not just one page, thanks plenty in advance..

Hello. There is a small gap between my input and image, see attached screenshot.

i thought it might be the image dimensions but it isn't; and I've removed margins, padding, etc.

What property should I be looking for please?

Here's some css:
Code:

html, body, div, p, form, fieldset,  input, img  {
    margin: 0; border: 0; padding: 0;
    line-height: 1;
}
 input  {
    border: 1px solid gray;
}
. txtImage  {
    vertical-align: text-bottom;
}
#frmCourse {
    width: 500px;
    height: 500px;
    margin: 5px; padding: 5px;
    outline: 1px solid gray;
}
#fldCourse {
    width: 80%;
    padding: 5px;
    margin: 0 auto;
    border: 1px solid #808080;
}
# inpCourse  {
    height: 20px;
    border: 1px solid #808080;
    vertical-align: text-bottom;
}

Hi, I remember reading that there is a css attribute for removing all browser-specific formatting from an element, for example forms, H tags and divs (which are pre-formatted differently in ie and firefox) but I can't recall what it was! Does anyone know how this is achieved as I find it very laborious when creating stylesheets to have to remember to reset all of these elements' formats.

- before anyone says it, I know I could set up a generic, cross-browser-ready stylesheet for use with all my sites, and this is a system I already employ, I am simply concerned with saving bytesize and achieveing smaller stylesheets that are more easy to work with.

I remember it was something like this:
instead of:
form{
margin:0px;
padding:0px;
}

I'm sure you can do something like:
form{
preformatting:none;
}

Does anyone know what I'm talking about? Or did I dream it?...

cheers in advance

Thanks for taking the time to read my question.

I'm having a bit of a brain stall here.

I want to get rid of the border around the href image, using css.

How????

Code:

<div class="Valid">
  <p>
    <a class="ValidLink" href="http://validator.w3.org/check?uri=referer"><img
        src="http://www.w3.org/Icons/valid-xhtml10"
        alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
  </p>			   
</div>

Thanks,

Brad

Hi,
Is it possible to remove the border from a select box?

Many thanks

Below is some code I scraped from a page in my application using firebug. The current code displays a series of row with what appears to be a blank row in between. I'm trying to figure out how I can reduce the vertical space. Thanks In Advance!

<tr>
<td class="PTSection">
<table class="PTSectionTable" cellspacing="0">
<tbody>
<tr>
<td class="PTSection">
<table cellspacing="0">
<tbody>
<tr>
<td cid="saw_11382_14" s="-1" l="0" e="3">
<table id="saw_11382_14_3_0" class="PT_VSGHT" cellspacing="0px" cellpadding="0px" border="0" onmousedown="PTPSS(event, this); return false" cid="saw_11382_14" s="-1" l="0" e="3">
<tbody>
<tr align="right" style="width:10px;">
<tr align="right" style="width:10px;">
<tr align="right" style="width:10px;">
</tbody>
</table>
</td>
<td id="saw_11382_14_3_0_Grp" class="PTCLDC" style="visibility:collapse">&nbsp;</td>
<td>
<table id="saw_11382_14_3_0_Tbl" cellspacing="0" cid="saw_11382_14" s="0" l="0" e="3">
<tbody>
<tr>
<td class="PTPSHLC" style="font-family:Arial Black;">Non-Sponsored Description:</td>
<td>&nbsp;</td>
<td class="PTSC OOLT">Stein IREE "Co2 Recycling"</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="PTSection">
<table cellspacing="0">
<tbody>
<tr>
<td cid="saw_11382_14" s="-1" l="1" e="3">
<table id="saw_11382_14_3_1" class="PT_VSGHT" cellspacing="0px" cellpadding="0px" border="0" onmousedown="PTPSS(event, this); return false" cid="saw_11382_14" s="-1" l="1" e="3">
<tbody>
<tr align="right" style="width:10px;">
<td class="PT_CHPHT">&nbsp;</td>
<td class="PT_VGHL" rowspan="3" style="display:none">Fund Code:</td>
</tr>
<tr align="right" style="width:10px;">
<tr align="right" style="width:10px;">
</tbody>
</table>
</td>
<td id="saw_11382_14_3_1_Grp" class="PTCLDC" style="visibility:collapse">&nbsp;</td>
<td>
<table id="saw_11382_14_3_1_Tbl" cellspacing="0" cid="saw_11382_14" s="0" l="1" e="3">
<tbody>
<tr>
<td class="PTPSHLC" style="font-family:Arial Black;">Fund Code:</td>
<td>&nbsp;</td>
<td class="PTSC OOLT">Business and Industry</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>