Need Help Using 2 Images In CSS

	Need Help Using 2 Images In CSS
	Discussion by lonebyrd with 12 Replies. Last Update: June 16, 2006, 2:37 pm

lonebyrd

Im trying to use a blue textured background image on my website using CSS. That would be all well and good if I didn't want to also use a picture with the name of my site that I made in photoshop in CSS also. I just don't know how to get the two to work using CSS without one canceling the other out. Is it possible to use two images with CSS? If so, can someone tell me how? I can't find a tutorial on it.

Wed Jun 14, 2006 Reply New Discussion

vujsa

Not entirely sure what you are asking here but I think this is it.

You have background_x.jpg that you have tiled or repeated on your website as the MAIN background. You also have a site banner (banner_y.jpg) that you want to have displayed say in the top left corner of your website. Now for some reason, you don't want to simply use an <IMG> tag in the correct spot for banner_y.jpg.

Am I following you so far?

If so, then you need only use a <DIV> tag where ever you want banner_y.jpg and set the background-image as banner_y.jpg.

So for <BODY>, background-image is background_x.jpg and <DIV>, the background-image is banner_y.jpg.

If your HTML is as follows:

CODE

Then your CSS should be like so:

CODE

body
{
background-image: url(background_x.jpg);
background-repeat: repeat;
}

.banner
{
background-image: url(banner_y.jpg);
background-repeat: no-repeat;
}

Now of course you'll need to fill in the rest of your CSS and HTML data.
For .banner, you'll need to add size and position information as well.

I hope this answers your question.

vujsa

Wed Jun 14, 2006 Reply New Discussion

yordan

Nice, vujsa, I had the same problem but I didn't dare ask the question. I'll try your method for the next pages I will have to write.

Wed Jun 14, 2006 Reply New Discussion

lonebyrd

Ok, I'm having a problem getting this to work. So I have a question. Do I add the URL for the banner and background where you put 'URL' or where it says '_x.jpg'? And another question I have is, I put the part about <DIV> in my regular script along with my link for my CSS page right? But why would I put a <DIV> when it isn't listed as a division, just a .banner?

Wed Jun 14, 2006 Reply New Discussion

vujsa

QUOTE (lonebyrd)

CODE

.banner
{
background-image: url(banner_y.jpg);
background-repeat: no-repeat;
}

Okay, last things first and first things last.

I used the .banner class deffinition without the tag information so that you could actually use the banner information in any HTML element that has a class named "banner".
You can if you want change .banner to div.banner.
For the url of the background-image you place the address of theimage inside of the parenthesis like this:
background-image: url(http://www.somedomain.com/images/banner_y.jpg);
or the short (relative) form:
background-image: url(/images/banner_y.jpg);

So the new and improved .banner entry in you CSS would look like this:

CODE

div.banner
{
background-image: url(http://www.somedomain.com/images/banner_y.jpg);
background-repeat: no-repeat;
}

Where banner_y.jpg will be replace with the actual image filename.

Hope this helps.

vujsa

Wed Jun 14, 2006 Reply New Discussion

Vyoma

Hey vujsa , I have one more question. I had a similar problem that was faced by lonebyrd, and I solved it (rather, did a trial-and-error), and for doing that I used IDs instead of classes.

For illustration, I used the following CSS:

CODE

#banner {
background-image: url(banner_y.jpg);
background-repeat: no-repeat;
}

and then later used it in the HTML as follows:

CODE

I just wanted to know what are the differences between using a class or an ID. I am sorry if this sounds dumb, but I have not gone about studying CSS in detail. I used it just to get some work done instead of relying on tables.

Could you please clear the two concepts of classes and ids?

Wed Jun 14, 2006 Reply New Discussion

vujsa

To the best of my knowledge, defining a style based on either class or id will work the same. I have never had any problems in that respect.

For the sake of good and standardized coding, a class is a general style rule whereas id is a specific style rule.

No 2 items in your HTML should have the same ID. One ID per item only. If you want to use <div id="banner"> then you should not use the "banner" id for any other tags, items, atrributes, etc... It is THAT items id only.

A class is a group of items which should be treated the same or similarly. This is where you should define your styles for a group of items like similar table cells: <td class="header"> where this would denote a table cell at the top of the table used as a header. Maybe the font and color are different than the other cells on the same table.

Think of it like this:
A class is like a group of students in school. CSS is the teacher and it teaches its class which is made up of several students each with their own id. The teacher may have a few classes to teach but has many students to teach. Some students need extra instruction that are different from the rest of the class.

You should do a search on the internet for CSS ID and CSS class which should point you to a few websites that are dedicated to explaining CSS.

Hope this helps.

vujsa

Wed Jun 14, 2006 Reply New Discussion

vizskywalker

Vujsa is 100% correct, although he did not get at the main reason for the difference. The reason why both exist comes down to the [abbr="Document Object Model"]DOM[/abbr] and [abbr="eXtensible Markup Language"]XML[/abbr] requirements. To properly parse and navigate an XML document for more than simple stylistic ends, which is one of the plusses of XML, sometimes information about the items must be stored in the element itself, hence the purpose of the id and class attributes. The id attribute, as vujsa explained, identifies one specific entity. This is useful because instead of having to define a person as such in XML:

CODE

<person>
<name>
vizskywalker
</name>
<personaldata>
data
</personaldata>
</person>

You can create it like so:

CODE

In this oversimplified example, it doesn't seem to make much difference, but when writing scripts such as javascripts to handle the XML document, being able to easily find and identify one entity without having to go through the whole tree it is connected to can be very important.

Other than stylistic purposes, the class attribute also has other uses in XML used for non-XHTML type XML documents:

CODE

<animal class="person" id="vizskywalker">
<communication>
english
</communication>
</animal>

<animal class="person" id="vujsa">
<communication>
english
</communication>
</animal>

<animal class="dog">
<communication>
bark
</communication>
</animal>

As you can see, one type of element, the animal element, has many subgroups. Rather than define a new element to determine the type of animal, you can use the class attribute. You can even mix and match id and class attributes to determine the type of animal and which specific animal of that type.

~Viz

Thu Jun 15, 2006 Reply New Discussion

lonebyrd

I was re-reading the posts because for some reason I can't get this to work. Now I have what may be a stupid question. Vusja wrote originally and said:

QUOTE

Now for some reason, you don't want to simply use an <IMG> tag in the correct spot for banner_y.jpg.

Is there a way to put just images in CSS, not background images? Because every tutorial I've seen on CSS is all about background images, I've never seen anything with just an <IMG> tag before. If that's all I have to do, and it's that simple, I will do that. I just never knew that it was an option.

Thu Jun 15, 2006 Reply New Discussion

vujsa

Since you r request was for using CSS to display the image, I only gave that way. You can not use CSS to directly display and image. CSS adds styling to HTML like background information. SO you can show an image as a background only using the CSS.

You can always display an image in HTML using the <IMG> tag. You can even modify the appearence of the image with CSS.

CODE

That's all of the required information needed. If you add an ID or class to the tag, you can control border, size, position, background and other information for the image. You can also you the default HTML commands to do many of the same functions.

CODE

Since this is very basic HTML, I didn't think to include it in my answer.

There was a time before we had CSS that everything was done only using HTML and HTML is still capible of doing these functions but it makes it much easier to edit and customize the esign of your website using CSS. There are many webmasters still only using basic HTML to build their websites.

Let me know if you need more assistance. In the meantime, maybe you should take a look at these:
- http://www.astahost.com/html-101-web-desig...ners-t2998.html
- http://www.astahost.com/html-102-web-desig...ners-t3087.html

Hope this helps.

vujsa

Thu Jun 15, 2006 Reply New Discussion

Vyoma

QUOTE (vujsa)

...

Think of it like this:
A class is like a group of students in school. CSS is the teacher and it teaches its class which is made up of several students each with their own id. The teacher may have a few classes to teach but has many students to teach. Some students need extra instruction that are different from the rest of the class.

...
Hope this helps.

vujsa

Link: view Post: 80731

Until the analogy of teacher-classes-students, I was wandering about the jungles of ignorance. Now, I get a basic understanding. Thanks vujsa, this definetly helped - though I do need to learn a bit more on this. I will follow your advice on searching the internet for the articles.

And vizskywalker! That post of yours up there nearly chased me back into that 'jungles of ignorance'. I can barely understand that - but that is fine. I will go on and understand more about classes and ids - may be then I will understand that.

lonebyrd, sorry for piggybacking on this thread.

I think that will be it from me

(until next time).

Thu Jun 15, 2006 Reply New Discussion

lonebyrd

Thanks, but I did know how to do it in HTML. I was just wondering if there was a seperate way to do it using CSS. I knew that was very basic, but what I was trying to avoid was having to put it on every page. But I shall figure out what I am doing wrong.

Fri Jun 16, 2006 Reply New Discussion

vujsa

Keep in mind that if you use an image in the background, then there has to be something in the foreground to hold the place usually.

Try placing a space " " inside of the <div> tags to hold it open so to speak. That may be all you need.

Another topic you might be interested in if you don't like having to edit every page you own all of the time just for one or two changes is the CMS101 - Content Management System topic. It's a basic tutorial to using a simple template driven system to maintain your website that most people can easily do. Then when update or additions come to your site maybe only one or two files need to be changed.

Hope This Helps.

vujsa

Fri Jun 16, 2006 Reply New Discussion