Welcome Guest ( Log In | Register )



2 Pages V   1 2 >  
 Reply to this topicStart new topic
> Need Help Using 2 Images In CSS
Rating 3 V
lonebyrd
post Jun 14 2006, 12:33 AM
Post #1


Premium Member
Group Icon

Group: Members
Posts: 302
Joined: 23-February 06
From: Northeastern Connecticut USA
Member No.: 11,487
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.
Go to the top of the page
 
+Quote Post
vujsa
post Jun 14 2006, 01:03 AM
Post #2


Absolute Newbie
Group Icon

Group: Admin
Posts: 888
Joined: 20-February 05
From: Indianapolis, Indiana, USA (Midwest)
Member No.: 2,714
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

<html>
    ...
    <body>
        <div class="banner"><!-- Banner Area --></div>
        ...
    </body>
</html>


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. cool.gif

vujsa
Go to the top of the page
 
+Quote Post
yordan
post Jun 14 2006, 11:04 AM
Post #3


Way Out Of Control - You need a life :)
Group Icon

Group: [MODERATOR]
Posts: 2,045
Joined: 16-August 05
Member No.: 7,896
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.
Go to the top of the page
 
+Quote Post
lonebyrd
post Jun 14 2006, 02:28 PM
Post #4


Premium Member
Group Icon

Group: Members
Posts: 302
Joined: 23-February 06
From: Northeastern Connecticut USA
Member No.: 11,487
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?
Go to the top of the page
 
+Quote Post
vujsa
post Jun 14 2006, 03:26 PM
Post #5


Absolute Newbie
Group Icon

Group: Admin
Posts: 888
Joined: 20-February 05
From: Indianapolis, Indiana, USA (Midwest)
Member No.: 2,714
QUOTE(lonebyrd @ Jun 14 2006, 10:28 AM) *

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?


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


Okay, last things first and first things last. wacko.gif
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. cool.gif

vujsa
Go to the top of the page
 
+Quote Post
Vyoma
post Jun 14 2006, 05:56 PM
Post #6


Cosmic Overlord
Group Icon

Group: Members
Posts: 550
Joined: 26-November 05
From: Chennai, India
Member No.: 9,811
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

<div id="banner"></div>


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?
Go to the top of the page
 
+Quote Post
vujsa
post Jun 14 2006, 09:47 PM
Post #7


Absolute Newbie
Group Icon

Group: Admin
Posts: 888
Joined: 20-February 05
From: Indianapolis, Indiana, USA (Midwest)
Member No.: 2,714
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. cool.gif

vujsa
Go to the top of the page
 
+Quote Post
vizskywalker
post Jun 15 2006, 03:14 AM
Post #8


Techno-Necromancer
Group Icon

Group: Members
Posts: 1,018
Joined: 13-January 05
From: The Net
Member No.: 2,127
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 DOM and XML 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
<person id="vizskywalker">
<personaldata>
  data
</personaldata>
</person>

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
Go to the top of the page
 
+Quote Post
lonebyrd
post Jun 15 2006, 04:26 AM
Post #9


Premium Member
Group Icon

Group: Members
Posts: 302
Joined: 23-February 06
From: Northeastern Connecticut USA
Member No.: 11,487
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.
Go to the top of the page
 
+Quote Post
vujsa
post Jun 15 2006, 08:32 AM
Post #10


Absolute Newbie
Group Icon

Group: Admin
Posts: 888
Joined: 20-February 05
From: Indianapolis, Indiana, USA (Midwest)
Member No.: 2,714
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

<img src="http://www.somedomain.com/images/banner_y.jpg>


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

<img src="http://www.somedomain.com/images/banner_y.jpg" width="100" height="20">


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. cool.gif

vujsa
Go to the top of the page
 
+Quote Post
« Next Oldest · Miscellaneous Scripting Languages & Ideas · Next Newest »
 

2 Pages V   1 2 >
Reply to this topicStart new topic

Collapse

> Similar Topics

Topics Topics
  1. Images In XML - Help?(3)


 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 14th October 2008 - 10:22 AM
Powered By IP.Board 2.2.1 © 2008  IPS, Inc.
Licensed to: Xisto Corporation