# Background Images in CSS



## Richard H2 (Jun 23, 2008)

Hi guys. Im currently working on this template http://www.oswd.org/design/preview/id/3551

How can i get a banner image to appear where the black bar is at the top (its essentially also black but has a company logo motief through out) without covering up the buttons. Im a real n00b to CSS and i have no idea how to do it.

Thanks for any help. Richard.


----------



## Gigacore (Jul 19, 2007)

no need of CSS.

Just remove the Title and description and replace it with a image tag.



>


url in the sense that path of the image u have stored in ur server. For example:



>


----------



## Richard H2 (Jun 23, 2008)

thanks for the idea but i think the problem i have runs much deeper than that. The banner is going to be on every page so I would have thought that can (and should) go in the CSS file as a background picture as that content is going to appear on every page.

Im at a loss as to what to do. Maybe learn CSS!


----------



## tomdkat (May 6, 2006)

Richard H2 said:


> Im at a loss as to what to do. Maybe learn CSS!


Well, this is definitely something you should do. 

In the meantime, the #menu style or the #top style have that black gradient bar background defined. Find either of those styles in the CSS file used by the page and you should be able to replace the black bar with your logo there.

Peace...


----------



## RTHaworth (Jul 11, 2005)

(im original poster) again, thanks for the help but although your advice sounds like it is the way to go it is not helping me at all. I dont know if anyone has actually looked at the CSS or HTML but i have no idea where to include the







within the style sheet or HTML. When i do try (and ive tried lots) it just doesn't appear. I think i almost got there but i think it was 'hidden' under something because the banner changed to the size of my logo but it was all black.

If someone could have a look at the code it would be great. Cheers, Richard.


----------



## tomdkat (May 6, 2006)

Hey Richard,

If you're going to use a pre-canned template, like the one you chose, you will simply have to learn about how the HTML and CSS work if you want to customize it. If you look in the file 'css/style.css' (there should be a 'css' directory in the directory where you saved the template), there will be a definition for a DIV named "top" that looks like this:


```
#top {
	width: 100%;
	height: 88px;
	color: #fff;
	background: #000 url(../img/top_bg.gif);
	overflow:hidden;
}
```
 The "background: #000 url(../img/top_bg.gif)'" line is setting the background image of the top portion of the page. You will have to set that to the background image you want and it should replace the image that is there.

Are you using a HTML tool to work on the site? If so, which tool are you using?

Peace...


----------



## Richard H2 (Jun 23, 2008)

hey tom. cheers for that. ill have a play with that now. Im using Dreamweaver CS3 but mostly in the HTML view as its the CSS im changing. Cheers.

Peace


----------



## RTHaworth (Jul 11, 2005)

ps. I know using 'a pre-canned template' is fat and lazy, but to make a site i can use for my business i just dont have the skills to make my own. hopefully this way ill hit the lurning curve hard, but learn I will.


----------



## RTHaworth (Jul 11, 2005)

ive kinda got there tom. But jeez it looks messy. Might have to affect another solution. still, i have learned something


----------



## tomdkat (May 6, 2006)

Richard H2 said:


> hey tom. cheers for that. ill have a play with that now. Im using Dreamweaver CS3 but mostly in the HTML view as its the CSS im changing. Cheers.


Cool! Then you should be able to access the CSS styles I mentioned above using DreamWeaver itself. That should make things a bit easier. 



RTHaworth said:


> ps. I know using 'a pre-canned template' is fat and lazy, but to make a site i can use for my business i just dont have the skills to make my own. hopefully this way ill hit the lurning curve hard, but learn I will.


There's nothing wrong with using a template (I've been using them myself). It's to use the template _without_ understanding it that can be problematic. If you're ok with the template 'as is', then they can be really easy (just change the text). If you need to tweak it, you'll have to understand how it works otherwise you'll be in the dark. 



RTHaworth said:


> ive kinda got there tom. But jeez it looks messy. Might have to affect another solution. still, i have learned something


Glad you've made some progress. 

I'm in a similar boat where I've got to replace a logo on a site based on an open source template I downloaded and the template isn't playing "nice" so I'm going to have to perform a little bit of surgery on it. 

Good luck!

Peace...


----------

