Hey John,
Here is a code I use for oval picture frames.
Might work for your situation.
.oval_picture_frame {
background-color: rgb(255,255,255);
margin: 0 auto 5%;
padding: 0;
text-align: center;
float: inherit;
-webkit-border-radius: 49%;
-moz-border-radius: 49%;
-khtml-border-radius: 49%;
-o-border-radius: 49%;
border-radius: 49%;
vertical-align: middle;
overflow: hidden;
display: inline-block;
zoom: 1;
}
Works on most browsers I have tested on.
Old IE choked on the apex but you can make a IE fall back if you really want.
Let me know if you run across a browser that chews it up and spits it out.
Best,
Karl DeSaulniers
Design Drumm
http://designdrumm.com
On Mar 28, 2016, at 5:55 PM, John J <[email protected]> wrote:
> Yes, that's right..I can see having various classes, and that these would
> change in media queries as needed. I think background-image would work for
> rectangular treatments of images...will have to play with this..thank you
> for the idea!
>
> J
>
> On Mon, Mar 28, 2016 at 3:28 PM, Chris Rockwell <[email protected]>
> wrote:
>
>> What are the different scenarios in which this would be used? Is the
>> assumption that you need to move the text so that it fits right on
>> different images correct? Can you use background-image for this, and then
>> position the text within the container?
>>
>> On Mon, Mar 28, 2016 at 5:00 PM John J <[email protected]> wrote:
>>
>>> I'm using "violator" in the sense of one element that "violates" the space
>>> of another..
>>>
>>> hoping to code an item that looks like the graphic in the link below..so
>>> far, I have the image floating here or there, but not succeeding getting a
>>> text hunk to be part of it.
>>>
>>> Thank you for any clues!
>>>
>>> John
>>>
>>> http://coffeeonmars.com/screenshots/violator.jpg
>>> ______________________________________________________________________
>>> css-discuss [[email protected]]
>>> 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 [[email protected]]
> 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 [[email protected]]
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/
