Defining image tags in Cascading Style sheets.

Given that I have dozens of html pages with the same logo and text banner on them, is there a way that I can just define both of these images in one place in a cascading style sheet and just use two different CSS defined tags in each of the html pages to populate the pages with each of these two images.  I want to be able to change the path of the logo and banner images in just one place for easier maintenance.

Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

I hope I understood you right, which likely I didn't ; ):

If your logo and text banner stay the same, which is what you said then why
should there be a problem ? You simply define style and path in a central external css file
for both of them, ok ? Why would you use two different tags if images stay same on each html page ?

Sources of images though (path) you can in my uptodate knowledge
only define in the html attribute of the img tag itself ( <img src="pathtoimage" . . .> )

In CSS central files you can define path to background images or images for list style elements
(list bullets etc.)
Sorry some nonsense in my comment above:

"You simply define style and path in a central external css file"

of course you can only define style but not path of <img> tags in an external stylesheet.

You would have to create a solution with div elements such as:

<div id="logo></div>

and then you can define style and source for an background-image of your
<div> element in an external central stylesheet.

div#logo {background-image: url(yourpathtoimage); width: . . .; height: ...; position: ...;

and so on ...


Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
jwright9Author Commented:

I think you have the right answer.  Let me clarify what my situation is.  I have two different .gif files.  One is an state agencies seal and the other is a rather large font title for the system.  Each web page has both images located at the top as a header.  I will reuse the page layout for the web applications of other agencies.  I want one place say as in a central CSS where all I have to do is edit the central CSS (one place and one place only) for the new web app.  This will reduce maintenance.

Would a background image defined in a CSS satisfy this requirement?

Thanks, J.
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

You should either put your two header files in a page of their own, and 'include' them into a master page.  Or use a template to manage your pages.

CSS has nothing to do with what you are trying to achieve, other than manipulating its position on the page itself.
jwright9Author Commented:
Thanks X!  I think that will do it.  I am very excited about CSS and I have had a course in it but I am short on real life experience on the subject.  Have a great day!   Behind Door Number three is 250 points juat for you!
(This comment is based on the old Let's Make A Deal Game show.)
Welcome jwright9,

'playing with CSS' can be lots of fun, but when you design pages always keep one thing in mind:

Your html code should follow semantic rules and your CSS code should be reserved
for the layout only. However, if you don't know about PHP or other script language for the web, then
what pmagony did suggest wouldn't be lots of help for you, since there is no natural html element
that can do the 'semantic' solution for you, a <div id="logo"> and <div id="banner"> seems a
justifiable solution here . .  and . . . I did lots of pages with css and html ... and sometimes it simply
was not possible to be 'holier as the pope' as far as 'semantic ideals' were concerned' : )

One of my favourite 'short and simple' tutorial pages about CSS and HTML for you on top:

jwright9Author Commented:
pmagony's approach sounds like it would work also.  Here where I work we use includes in html pages alot.  I actually am working on JSPs.  I guess when you (xberry)  say follow semantics you mean don't use tags for a purpose other than what they are designed for.  However it looks like div tags are a pretty good candidate for the job that xberry suggests I use them for.  There is almost always more than one fairly good way to do a task in web and software design.  Thank you both again for your good, solid suggestions.

>> you mean don't use tags for a purpose other than what they are designed for

exactly ; )

>> However it looks like div tags are a pretty good candidate for the job ...

Well, actually the main purpose of div is to
a) replace table elements in their deprecated job of providing for page layout
(of course table elements are designed to present sheets of data from data base etc.
 or relate entries such as in forms, well, simply being ... tables ; )
b) provide for a html semantic solution where no such exists by the default set of defined html tags
( html tags for 'navigation', 'menu', 'topbar', etc. simply do not exist,
so you create welcome solutions with the div tag )

You understand the semantic idea behind html, no other viable solution at hands and
if all your code is valid html anyway, so .. it really is fine.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.