Defining image tags in Cascading Style sheets.

Posted on 2007-03-21
Last Modified: 2013-11-19
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.

Question by:jwright9
  • 4
  • 3
LVL 14

Expert Comment

ID: 18766590
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.)
LVL 14

Accepted Solution

xberry earned 250 total points
ID: 18766663
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 ...


Author Comment

ID: 18766686

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.
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.


Expert Comment

ID: 18766713
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.

Author Comment

ID: 18766721
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.)
LVL 14

Expert Comment

ID: 18766942
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:


Author Comment

ID: 18767307
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.

LVL 14

Expert Comment

ID: 18773051
>> 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.

Featured Post

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
Get to know the ins and outs of building a web-based ERP system for your enterprise. Development timeline, technology, and costs outlined.
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

821 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question