CSS & Images

[Just Askin']

Hi, I've been wanting to experiment with use CSS's.
Can you, and if so, how do you use CSS for images?

 

[Kevin Spencer]

Your question is so general that it would take pages and pages to answer all
possible interpretations of it. Do you want to position images? Do you want
to size images? Do you want to put borders around images? Do you want to use
images for backgrounds? Of Pages, tables, Divs, table cells? Do you want to
set various attributes of images?

Here's the complete W3C CSS specification:

http://www.w3.org/TR/REC-CSS2/cover.html

If you can be more specific, so can I! ;-)

--
HTH,

Kevin Spencer
Microsoft MVP
Professional Chicken Salad Alchemist

I recycle.
I send everything back to the planet it came from.

 

[Just Askin']

Sorry, I want to position images. And images for backgrounds
ty

Your question is so general that it would take pages and pages to answer
all possible interpretations of it. Do you want to position images? Do you
want to size images? Do you want to put borders around images? Do you want
to use images for backgrounds? Of Pages, tables, Divs, table cells? Do you
want to set various attributes of images?

Here's the complete W3C CSS specification:

http://www.w3.org/TR/REC-CSS2/cover.html

If you can be more specific, so can I! ;-)

--
HTH,

Kevin Spencer
Microsoft MVP
Professional Chicken Salad Alchemist

I recycle.
I send everything back to the planet it came from.

 

[Kevin Spencer]

Here's a reference to the img tag on the MSDN Library online. It lists all
the styles available to an image tag, and includes samples of almost every
style:

http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/img.asp?frame=true

Sorry, I want to position images. And images for backgrounds
ty

 

[Kevin Spencer]

Hmm, somehow I must have sent that by accident. In case I didn't get it all
in, here's a link to a reference on the MSDN Library online that shows (and
has samples for) all the CSS styles you can apply to images:

http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/img.asp?frame=true

Here's an example from the CSS specification I pointed you to with my first
response:

<STYLE type="text/css">
BODY { height: 8.5in } /* Required for percentage heights below */
#header {
position: fixed;
width: 100%;
height: 15%;
top: 0;
right: 0;
bottom: auto;
left: 0;
}
#sidebar {
position: fixed;
width: 10em;
height: auto;
top: 15%;
right: auto;
bottom: 100px;
left: 0;
}
#main {
position: fixed;
width: auto;
height: auto;
top: 15%;
right: 0;
bottom: 100px;
left: 10em;
}
#footer {
position: fixed;
width: 100%;
height: 100px;
top: auto;
right: 0;
bottom: 0;
left: 0;
}
</STYLE>

As for backgrounds, here's a link to the section on the body tag. Use the
style "background-image" which takes a URL to the image:

http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/background_0.asp

Here's an example from the CSS specification I pointed you to with my first
response:

<style type="text/css"><!--
BODY { background-image: url("marble.gif") }
P { background-image: none }
--></style>

The same style can be applied to other HTML elements as well for using an
image as a background, but depending on the browser, may work in some
elements, and not in others. It would be a good idea to test it in at least
IE6 and FireFox to be sure.

--
HTH,

Kevin Spencer
Microsoft MVP
Professional Chicken Salad Alchemist

I recycle.
I send everything back to the planet it came from.

Sorry, I want to position images. And images for backgrounds
ty

 

[Just Askin']

Kevin, you have been most helpful, thank you

Hmm, somehow I must have sent that by accident. In case I didn't get it
all in, here's a link to a reference on the MSDN Library online that shows
(and has samples for) all the CSS styles you can apply to images:

http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/img.asp?frame=true

Here's an example from the CSS specification I pointed you to with my
first response:

<STYLE type="text/css">
BODY { height: 8.5in } /* Required for percentage heights below */
#header {
position: fixed;
width: 100%;
height: 15%;
top: 0;
right: 0;
bottom: auto;
left: 0;
}
#sidebar {
position: fixed;
width: 10em;
height: auto;
top: 15%;
right: auto;
bottom: 100px;
left: 0;
}
#main {
position: fixed;
width: auto;
height: auto;
top: 15%;
right: 0;
bottom: 100px;
left: 10em;
}
#footer {
position: fixed;
width: 100%;
height: 100px;
top: auto;
right: 0;
bottom: 0;
left: 0;
}
</STYLE>

As for backgrounds, here's a link to the section on the body tag. Use the
style "background-image" which takes a URL to the image:

http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/background_0.asp

Here's an example from the CSS specification I pointed you to with my
first response:

<style type="text/css"><!--
BODY { background-image: url("marble.gif") }
P { background-image: none }
--></style>

The same style can be applied to other HTML elements as well for using an
image as a background, but depending on the browser, may work in some
elements, and not in others. It would be a good idea to test it in at
least IE6 and FireFox to be sure.

--
HTH,

Kevin Spencer
Microsoft MVP
Professional Chicken Salad Alchemist

I recycle.
I send everything back to the planet it came from.

 

[Kevin Spencer]

Kevin Spencer
Microsoft MVP
Professional Chicken Salad Alchemist

I recycle.
I send everything back to the planet it came from.