CSS Image code (stumped again)

[rluka]

I would like to place a picture on my web-page. Im using a separate style sheet. Is this the right code in the style sheet?

 
#picture
{
  background-image: url(picture.jpg) bottom right no-repeat;
}

Now what do I place on my page so that the image will display?
Do I put this:

  <div id="picture"></div>

Im just a beginner and this has me stumped
Thanks..your help would be greatly appreciated
Ron L

[toicontien]

What you want is:

#picture
{
  background: transparent url(picture.jpg) no-repeat scroll bottom right;
}

The background-image: property only takes the "url(foo.*)" value. You can set more than one background image property by using the shorthand background: property.

http://www.w3schools.com/css/css_ref...asp#background

(W3Schools is a great site for beginners too)

[LJK]

Hi -
If it's an empty <div> w/ no content, you'll
definitely need to set the height as well -
let's say for a 126h x 765w image:

div#header{
width:100%; height:126px; margin:0 auto;
background:silver url(images/header2.png) no-repeat 0% 0%;}

Good luck,
El

[rluka]

Hi -
If it's an empty <div> w/ no content, you'll
definitely need to set the height as well -
let's say for a 126h x 765w image:

div#header{
width:100%; height:126px; margin:0 auto;
background:silver url(images/header2.png) no-repeat 0% 0%;}

Good luck,
El

I did this:

 
#logo
{
	background: url('3.jpg') right bottom no-repeat;
	height: 250px;
	width: 100%;
}

Not sure if I understood you correctly..Im really new at this and no where did I see any reference to my #picture container or *.jpg file in your code example..Sorry.
Is this what you meant?
The image appeared but it wouldn't go to the bootom right. It stays in the upper right hand position.
Thanks you for taking the time to respond..Ron L

[LJK]

Hi -
It would help to have a link to a url to best figure-out your problem.

You're using a <div id="logo"> to place the image on the page.
In toicontien's example, they used a <div id="picture">
and in mine I used a <div id="header">...it doesn't really matter, as the
end result would be pretty much the same!

Good luck,
El

[rluka]

Hi -
It would help to have a link to a url to best figure-out your problem.

You're using a <div id="logo"> to place the image on the page.
In toicontien's example, they used a <div id="picture">
and in mine I used a <div id="header">...it doesn't really matter, as the
end result would be pretty much the same!

Good luck,
El

Sorry, your right..I just got confused with the coding style. Is that a valid way of adding an image to a page? Is there a work around that would allow 2 images to be used in a 'body' tag?
Thanks very much for your help..Ron L

[CWG]

Is there a reason your not using a simple img tag?
<img src="pathtomyimage" />

[rluka]

Is there a reason your not using a simple img tag?
<img src="pathtomyimage" />

Im new to CSS coding, would I have to create a class for that or am I making it to confusing. Or are you saying that I can just add that to the body of the page? Could you please give me a realtime example? Like: how to align it bottom, right.
Thanks for your response..Ron L

[CWG]

I am confused on what result your wanting. Can you give me more information on how you want the page to look? Then I can give you the best approach. You know the old saying "1,00.. ways to skin a cat."

[pcthug]

Or are you saying that I can just add that to the body of the page?

Yes.

<img src="pathtomyimage" style="position: absolute; top: 700px; left: 300px;" />

[CWG]

If you use the position: absolute then it will position itself where you want it but it will cover anything in the normal flow of the document.
If you can give me an explanation of how you want the document to look I can point you in the right direction.

[rluka]

So far I have this new project And I would like to add this image to the bottom right hand corner. Its important that this image stay in the background.
Thanks to all of you for your help..Ron L

[CWG]

This helps. Heres my solution:

use this for your body class in your css style sheet:

body{
background-color: #E7EFFF;
background-image: url(3HorsesBySusanKerr.jpg);
background-repeat: no-repeat;
background-position: bottom right;
}

Then for the gey column on the left use a separate div tag.

<div id="LeftColumn"></div>

In your style sheet add:

#LeftColumn {
float: left;
height: 100%;
width: 75px;
background-image: url(leftmargin.gif);
background-repeat: repeat-y;
}

[CWG]

FYI.
Depending on how your content will be added you may not need the float: left

[rluka]

Your code was also along the lines of my way of thinking. Unfortunatley I tried it and it didn't work. I posted the same question some where else and this is what I got. I was amazed at how this code made my page[/URL] look.

/* CSS Document */

html, body { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    } 

html { 
    background-image: url('leftmargin.gif'); 
    background-repeat: repeat-y; 
    background-color: #E7EFFF; 
    } 

body { 
    background: url(3Horses.jpg) bottom right fixed no-repeat; 
    } 

#header { 
    background: url(top.gif) left repeat-x; 
    } 
    
h1 { 
    color: #fff; 
    margin-left: 70px; 
    line-height: 75px; 
    font-family: Georgia, "Times New Roman", Times, serif; 
    font-style: italic; 
    }

Thanks for your input..Ron L