Re: [css-d] calling an image from within the CSS
At 6:54 AM -0700 1/19/07, Michael Stevens wrote:
Being curious I visited that page and it did indeed have the properties
listed in the order:
['background-color' || 'background-image' || 'background-repeat' ||
'background-attachment' || 'background-position']
But, at the bottom of that property the example is given:
P { background: url(chess.png) gray 50% repeat fixed }
Which does not follow that order. That, and the fact that it is not
explicitly stated that the order matters, leads me to believe that the order
does not matter.
No, it doesn't. The || is defined to mean something like or
with order-insensitivity.
Of course, that does not mean that some browsers are picky about the order.
There was an obscure keyword ordering bug in Netscape 6.x with
respect to 'background'[1], but no others I've heard about.
[1] See
http://developer.mozilla.org/en/docs/background-position_Keyword_Order
for details.
--
Eric A. Meyer (http://meyerweb.com/eric/), List Chaperone
CSS is much too interesting and elegant to be not taken seriously.
-- Martina Kosloff (http://mako4css.com/)
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] calling an image from within the CSS
Kevin J Pledger wrote: One the page in the link, www.oneyed.com/mt . I want to be able to make that image as background in #banner within the CSS file so its the same on all pages. After looking at various pages and trying to understand the different types of coding, I put in this line ( background : url(images/mt2.jpg) #fff; ) and as I thought it wasnt visible. When the #fff is removed the image appears, but breaks the page. I want to be able to retain the white background as the banner covers the width of the page, so the image will have to be centered. Kevin, The background CSS property is a culmination of several individual properties. Does it work if you set those separately? I.e.: background-image: url(images/mt2.jpg); background-color: #fff; background-position: top center; background-repeat: no-repeat; If you want to put it in one property, browsers tend to be specific about the order of things if you use more than one value. From the CSS spec: background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] See http://www.w3.org/TR/CSS201/colors.html#propdef-background for more information. HTH, Rick. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] calling an image from within the CSS
Kevin J Pledger wrote: ... After looking at various pages and trying to understand the different types of coding, I put in this line ( background : url(images/mt2.jpg) #fff; ) and as I thought it wasnt visible. When the #fff is removed the image appears, but breaks the page. I want to be able to retain the white background as the banner covers the width of the page, so the image will have to be centered. I think this is the correct structure background: #fff url(images/mt2.jpg) no-repeat top left; The #fff is the background color If you don't place the no-repeat then the img will repeat in both axes. You can also use repeat-x or repeat-y if you want it to repeat in an axis. Top (you can also use bottom or middle) left (or right) is for the placement of the image. You can use pixels instead of words: background: #fff url(images/mt2.jpg) no-repeat 50px 10px; In this case will place the image 50px from the left of the container and 10px from the top. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] calling an image from within the CSS
Rick den Haan wrote: The background CSS property is a culmination of several individual properties. Does it work if you set those separately? I.e.: background-image: url(images/mt2.jpg); background-color: #fff; background-position: top center; background-repeat: no-repeat; If you want to put it in one property, browsers tend to be specific about the order of things if you use more than one value. From the CSS spec: background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] See http://www.w3.org/TR/CSS201/colors.html#propdef-background for more information. Rick, I tried the above and it still wont display. Tried the link you give and get *The URL path in your request doesn't match anything we have available.* Will keep looking and experimenting. Regards Kevin. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] calling an image from within the CSS
Nick Mavros wrote ... I think this is the correct structure background: #fff url(images/mt2.jpg) no-repeat top left; The #fff is the background color If you don't place the no-repeat then the img will repeat in both axes. You can also use repeat-x or repeat-y if you want it to repeat in an axis. Top (you can also use bottom or middle) left (or right) is for the placement of the image. You can use pixels instead of words: background: #fff url(images/mt2.jpg) no-repeat 50px 10px; In this case will place the image 50px from the left of the container and 10px from the top. Nick, Tried this and white background disappeared and still no image. Very frustrating .. Will keep on reading and trying. Thanks for your input. One always keeps learning.. Regards, Kevin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] calling an image from within the CSS
Kevin J Pledger wrote: Nick, Tried this and white background disappeared and still no image. Very frustrating .. Will keep on reading and trying. Thanks for your input. One always keeps learning.. Regards, Kevin Maybe you got the url wrong. The url you are using url(images/mt2.jpg) it means that the image mt2.jpg is located in a folder images inside the folder where the html file stands. Let me explain more: lets say your file is index.html you have to use the following structure: In the base folder is the index.html and the images folder. And in the images folder is the mt2.jpg. [base folder] index.html [folder images] mt2.img __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] calling an image from within the CSS
Kevin J Pledger wrote:
Rick den Haan wrote:
See http://www.w3.org/TR/CSS201/colors.html#propdef-background for more
information.
Tried the link you give and get *The URL path in your request doesn't match
anything we have available.*
My bad. http://www.w3.org/TR/CSS21/colors.html#propdef-background that
0 shouldn't have been there
Nick Mavros wrote:
Maybe you got the url wrong.
The url you are using url(images/mt2.jpg) it means that the image
mt2.jpg is located in a folder images inside the folder where the html
file stands.
Actually, the url is relative from the location of the *css* file, not
the HTML.
So, if your structure is like this:
[/]
- index.html
- [/style]
- - style.css
- [/images]
- - mt2.jpg
you should use url(../images/mt2.jpg) in your style.css file. Maybe
that's the problem? I always put single quotes around the url just in
case, so url('../images/mt2.jpg'). Does that work?
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] calling an image from within the CSS
-Original Message-
From: Nick Mavros [mailto:[EMAIL PROTECTED]
Sent: Friday, January 19, 2007 18:40 PM
To: Kevin J Pledger
Cc: 'Css-D Lists'
Subject: Re: [css-d] calling an image from within the CSS
Kevin J Pledger wrote:
Nick,
Tried this and white background disappeared and still no image.
Very frustrating ..
Will keep on reading and trying.
Thanks for your input. One always keeps learning..
Regards,
Kevin
Nick Mavros wrote:
Maybe you got the url wrong.
The url you are using url(images/mt2.jpg) it means that the image mt2.jpg is
located in a folder images inside the folder where the html file stands.
Let me explain more:
lets say your file is index.html you have to use the following structure:
In the base folder is the index.html and the images folder. And in the
images folder is the mt2.jpg.
[base folder]
index.html
[folder images]
mt2.img
-
Nick,
My directory structure is this under mt/
scripts/css/
images/mt2.jpg
index.htm
So I am pretty sure that with url(images/mt2.jpg) is correct. I also tried
url(/url/images/mt2.jpg) but still the same result no image showing up.
My CSS for #banner is this now based on your advice and what I read on wc3.
My ordering could be wrong also..
#banner {
background-color: #fff;
background-image: url(images/mt2.jpg);
background-repeat: no-repeat;
background-position: top center;
height:75px;
border-top:1px solid #000;
border-right:1px solid #000;
border-left:1px solid #000;
border-bottom:1px solid #000;
voice-family: \}\;
voice-family: inherit;
height:74px;
}
htmlbody #banner {
height:74px;
}
Back to the drawing board and more reading.
Thanks again.
Kevin.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] calling an image from within the CSS
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Rick den Haan
Sent: Friday, January 19, 2007 19:07 PM
To: 'Css-D Lists'
Subject: Re: [css-d] calling an image from within the CSS
Kevin J Pledger wrote:
Rick den Haan wrote:
See http://www.w3.org/TR/CSS201/colors.html#propdef-background for
more information.
Tried the link you give and get *The URL path in your request doesn't
match anything we have available.*
My bad. http://www.w3.org/TR/CSS21/colors.html#propdef-background that
0 shouldn't have been there
Nick Mavros wrote:
Maybe you got the url wrong.
The url you are using url(images/mt2.jpg) it means that the image
mt2.jpg is located in a folder images inside the folder where the
html file stands.
Rick den Hann wrote:
Actually, the url is relative from the location of the *css* file, not the
HTML.
So, if your structure is like this:
[/]
- index.html
- [/style]
- - style.css
- [/images]
- - mt2.jpg
you should use url(../images/mt2.jpg) in your style.css file. Maybe that's
the problem? I always put single quotes around the url just in case, so
url('../images/mt2.jpg'). Does that work?
Hi Rick,
I had tried that already but the minute I try that the code goes from this:
#banner {
background-color: #fff;
background-image: url(images/mt2.jpg);
background-repeat: no-repeat;
background-position: top center;
height:75px;
border-top:1px solid #000;
border-right:1px solid #000;
border-left:1px solid #000;
border-bottom:1px solid #000;
voice-family: \}\;
voice-family: inherit;
height:74px;
}
htmlbody #banner {
height:74px;
}
To this, I suspect the inclusion of the .. Causes some major heart attack to
the code.
#banner {
border:1px solid #000; background-color: #fff;
background-image: url('images/mt2.jpg');
background-repeat: no-repeat;
height:75px;
voice-family: \}\;
voice-family: inherit;
height:74px; background-position-y:center
}
htmlbody #banner {
height:74px;
}
Very Frustrating
I went through this when I tried simple javascripting ... Look and look for
the error can see it, walk away come back you see that you left out a ' in
the code
Thanks again ..
Kevin
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org --
http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] calling an image from within the CSS
Kevin J Pledger wrote:
I had tried that already but the minute I try that the code goes from this:
#banner {
background-color: #fff;
background-image: url(images/mt2.jpg);
background-repeat: no-repeat;
background-position: top center;
height:75px;
border-top:1px solid #000;
border-right:1px solid #000;
border-left:1px solid #000;
border-bottom:1px solid #000;
voice-family: \}\;
voice-family: inherit;
height:74px;
}
htmlbody #banner {
height:74px;
}
To this, I suspect the inclusion of the .. Causes some major heart attack to
the code.
#banner {
border:1px solid #000; background-color: #fff;
background-image: url('images/mt2.jpg');
background-repeat: no-repeat;
height:75px;
voice-family: \}\;
voice-family: inherit;
height:74px; background-position-y:center
}
htmlbody #banner {
height:74px;
}
Where did you leave the ..? From your previous post, I understand your
file structure is like this:
mt/index.html
mt/scripts/css/???.css
mt/images/mt2.jpg
If I got that right, you need to go two levels back up from the CSS
file. So change
background-image: url('images/mt2.jpg');
to
background-image: url('../../images/mt2.jpg');
Does that help?
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] calling an image from within the CSS
Hi Rick,
I worked it out in between me sending and receiving your reply.
I put in the full url that I was testing from and it pulled in the image. It
was then I realised what you meant and when I put
url('../../images/mt2.jpg') it worked. Don't know why I didn't think of that
in the first place.
My thanks to you and Nick for your patience.
Kind Regards,
Kevin.
_
From: Rick den Haan [mailto:[EMAIL PROTECTED]
Sent: Friday, January 19, 2007 19:37 PM
To: Kevin J Pledger
Cc: 'Css-D Lists'
Subject: Re: [css-d] calling an image from within the CSS
Kevin J Pledger wrote:
I had tried that already but the minute I try that the code goes from this:
#banner {
background-color: #fff;
background-image: url(images/mt2.jpg);
background-repeat: no-repeat;
background-position: top center;
height:75px;
border-top:1px solid #000;
border-right:1px solid #000;
border-left:1px solid #000;
border-bottom:1px solid #000;
voice-family: \}\;
voice-family: inherit;
height:74px;
}
htmlbody #banner {
height:74px;
}
To this, I suspect the inclusion of the .. Causes some major heart attack to
the code.
#banner {
border:1px solid #000; background-color: #fff;
background-image: url('images/mt2.jpg');
background-repeat: no-repeat;
height:75px;
voice-family: \}\;
voice-family: inherit;
height:74px; background-position-y:center
}
htmlbody #banner {
height:74px;
}
Where did you leave the ..? From your previous post, I understand your file
structure is like this:
mt/index.html
mt/scripts/css/???.css
mt/images/mt2.jpg
If I got that right, you need to go two levels back up from the CSS file. So
change
background-image: url('images/mt2.jpg');
to
background-image: url('../../images/mt2.jpg');
Does that help?
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] calling an image from within the CSS
Being curious I visited that page and it did indeed have the properties
listed in the order:
['background-color' || 'background-image' || 'background-repeat' ||
'background-attachment' || 'background-position']
But, at the bottom of that property the example is given:
P { background: url(chess.png) gray 50% repeat fixed }
Which does not follow that order. That, and the fact that it is not
explicitly stated that the order matters, leads me to believe that the order
does not matter.
Of course, that does not mean that some browsers are picky about the order.
I've heard that IE doesn't always follow W3 specs... :)
Just thought I'd throw that out there.
Mike
-Original Message-
The background CSS property is a culmination of several individual
properties. Does it work if you set those separately? I.e.:
background-image: url(images/mt2.jpg);
background-color: #fff;
background-position: top center;
background-repeat: no-repeat;
If you want to put it in one property, browsers tend to be specific about
the order of things if you use more than one value. From the CSS spec:
background: [background-color] [background-image] [background-repeat]
[background-attachment] [background-position]
See http://www.w3.org/TR/CSS21/colors.html#propdef-background for more
information.
HTH,
Rick.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
