Re: [css-d] Fwd: Image Background
On Wed, Aug 19, 2009 at 5:27 PM, Victor Subervi wrote:
> Are you suggesting something like this?
>
> #container {
> width: 780px;
> font-family: Arial;
> font-size: 0.8em;
> background: url(../images/bgimage.jpg) repeat-y 50% 10%;
> border: 1px solid #e6930f;
> }
>
> img #container {background: url(image/bgimage.jpg) repeat-y 50% 10%;}
>
> If so, what do I do about the width variable, toss it out and add a "border:
> 10px" instead?
> TIA,
> Victor
Maybe I am not understanding what you want. Are you looking for, for
example, an image of an ornate picture frame that would surround an
image? Not sure a background-image is the answer in this case unless
the dimensions are fixed.
If you are talking about just a patterned, decorative background-image
for behind an image, it's more like:
#container {
width: 780px;
font: .8em Arial;
background: url(../images/bgimage.jpg) repeat 0 0;
padding: 10px;
}
Again, maybe I am way off base here...
--
Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Fwd: Image Background
On Aug 20, 2009, at 4:03 AM, Victor Subervi wrote: > Great! That works nicely. Now, I understand it's possible to do it > with > images...but how? How would they resize according to the size of the > image > around which they're framing, or be put in the background of those > images? Were you thinking of the CSS-3 border-image property? sample page http://www.css3.info/preview/border-image/ docs http://www.w3.org/TR/css3-background/#the-border-image Bear in mind that this only works in Firefox 3.5.x and Safari 3.2+/ Chrome 2. Philippe --- Philippe Wittenbergh http://l-c-n.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Fwd: Image Background
Are you suggesting something like this?
#*container* {
width: 780px;
font-family: Arial;
font-size: 0.8em;
*background*: url(../*image*s/bg*image*.jpg) repeat-y 50% 10%;
border: 1px solid #e6930f;
}
img #*container* {*background*: url(*image*/bg*image*.jpg) repeat-y 50%
10%;}
If so, what do I do about the width variable, toss it out and add a "border:
10px" instead?
TIA,
Victor
On Wed, Aug 19, 2009 at 2:16 PM, Tom Livingston wrote:
> A container would have a background image larger than the viewable
> area. As the content of that container increased in size, more of the
> bg image would show. Pad container as needed for border effect. Just a
> suggestion.
>
> HTH
>
> On Wed, Aug 19, 2009 at 3:03 PM, Victor Subervi
> wrote:
> > Great! That works nicely. Now, I understand it's possible to do it with
> > images...but how? How would they resize according to the size of the
> image
> > around which they're framing, or be put in the background of those
> images?
> > TIA,
> > Victor
> >
>
>
> --
>
> Tom Livingston | Senior Interactive Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
>
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Fwd: Image Background
A container would have a background image larger than the viewable area. As the content of that container increased in size, more of the bg image would show. Pad container as needed for border effect. Just a suggestion. HTH On Wed, Aug 19, 2009 at 3:03 PM, Victor Subervi wrote: > Great! That works nicely. Now, I understand it's possible to do it with > images...but how? How would they resize according to the size of the image > around which they're framing, or be put in the background of those images? > TIA, > Victor > -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Fwd: Image Background
Great! That works nicely. Now, I understand it's possible to do it with
images...but how? How would they resize according to the size of the image
around which they're framing, or be put in the background of those images?
TIA,
Victor
On Wed, Aug 19, 2009 at 11:01 AM, Ron Zisman wrote:
>
> On Aug 19, 2009, at 9:44 AM, Victor Subervi wrote:
>
> Hi;
>> I saw this done somewhere but lost track of it. What I would like to do is
>> put a resizable background image (or color) behind pics I put on a Web
>> site,
>> such that, for example, it ends up bordering the image 10 px all around.
>> How
>> do I do this?
>> TIA,
>> Victor
>>
>
> something like this?
> img {border:10px solid blue;}
>
> you could use (css) padding or border to create the colored background
> --ron
>
>
>> __
>> css-discuss [cs...@lists.css-discuss.org]
>> http://www.css-discuss.org/mailman/listinfo/css-d
>> List wiki/FAQ -- http://css-discuss.incutio.com/
>> List policies -- http://css-discuss.org/policies.html
>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>>
>
>
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
