There's no such thing as a stupid question, but they're the easiest to answer.
JoinTour
Login
 
Tag Cloud
access audio avg avg 8 bios blue screen boot bsod computer connection cpu crash css dell desktop dma driver drivers dvd email error excel explorer firefox firefox 3 freeze gimp graphics hard drive hardware hijackthis hjt install internet internet explorer itunes keyboard laptop macro malware monitor motherboard network networking outlook outlook 2003 outlook 2007 outlook express pio problem problems router seo server slow sound sp3 spyware trojan usb video virtumonde virus vista vundo windows windows vista windows xp winxp wireless
Web Design & Development
Search
Search in:
 
Advanced Search
Tech Support Guy Forums > Internet & Networking > Web Design & Development >
Background Images in CSS


HELLO AND WELCOME! Before you can post your question, you'll have to register -- it's completely free! Click here to join today! We highly recommend that you print a copy of our Guide for New Members. Enjoy!

 
Thread Tools
Richard H2's Avatar
Junior Member with 3 posts.
 
Join Date: Jun 2008
23-Jun-2008, 07:52 AM #1
Background Images in CSS
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's Avatar
Computer Specs
Senior Member with 547 posts.
 
Join Date: Jul 2007
Location: Bangalore
Experience: You mean XP ?
23-Jun-2008, 09:03 AM #2
no need of CSS.

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

Quote:
<img src="url" />
url in the sense that path of the image u have stored in ur server. For example:

Quote:
<img src="/images/logo.jpg" />
Richard H2's Avatar
Junior Member with 3 posts.
 
Join Date: Jun 2008
23-Jun-2008, 11:05 AM #3
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's Avatar
Computer Specs
Distinguished Member with 3,521 posts.
 
Join Date: May 2006
Location: S.F. Bay Area, CA
Experience: Intermediate
23-Jun-2008, 01:44 PM #4
Quote:
Originally Posted by Richard H2 View Post
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's Avatar
Member with 98 posts.
 
Join Date: Jul 2005
23-Jun-2008, 06:00 PM #5
(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 <img src="/images/logo.jpg" /> 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's Avatar
Computer Specs
Distinguished Member with 3,521 posts.
 
Join Date: May 2006
Location: S.F. Bay Area, CA
Experience: Intermediate
23-Jun-2008, 07:42 PM #6
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:

Code:
#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's Avatar
Junior Member with 3 posts.
 
Join Date: Jun 2008
24-Jun-2008, 06:50 AM #7
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's Avatar
Member with 98 posts.
 
Join Date: Jul 2005
24-Jun-2008, 06:53 AM #8
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's Avatar
Member with 98 posts.
 
Join Date: Jul 2005
24-Jun-2008, 07:10 AM #9
ive kinda got there tom. But jeez it looks messy. Might have to affect another solution. still, i have learned something
tomdkat's Avatar
Computer Specs
Distinguished Member with 3,521 posts.
 
Join Date: May 2006
Location: S.F. Bay Area, CA
Experience: Intermediate
24-Jun-2008, 10:02 AM #10
Quote:
Originally Posted by Richard H2 View Post
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.

Quote:
Originally Posted by RTHaworth View Post
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.

Quote:
Originally Posted by RTHaworth View Post
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...
Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are Off
Refbacks are Off

You Are Using:
Server ID
Advertisements do not imply our endorsement of that product or service.
All times are GMT -4. The time now is 03:39 PM.
Copyright © 1996 - 2008 TechGuy, Inc. All rights reserved.
Powered by vBulletin, Copyright © 2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.1.0
Powered by Cermak Technologies, Inc.