| Author |
Questions on the background: url("http://"); property
|
|
| ryan.fairchild@gmail.com 2004-11-25, 4:17 am |
| Ok I basically am creating a container for a bunch of other <div> tags.
But I want to make four jpegs/gif/whatever that goes in each corner so
they look rounded.
I thought this is how I would do it but I could be wrong.
body {
background:#999 url("http://") no-repeat top left;
background/* */:/**/url("http://") no-repeat top right;
background: /**/url("http://") no-repeat top right;
background/* */:/**/url("http://") no-repeat bottom right;
background: /**/url("http://") no-repeat bottom right;
background/* */:/**/url("http://") no-repeat bottom left;
background: /**/url("http://") no-repeat bottom left;
margin:0;
padding:10px 0 14px;
font:x-small Verdana,Sans-serif;
text-align:center;
font-size/* */:/**/small;
font-size: /**/small;
}
Any suggestions to pull this off easier?
| |
| ryan.fairchild@gmail.com 2004-11-25, 4:17 am |
| Ahh damn, let me clarify.
#container{
position:relative;
background:#999 url("http://to_picture") no-repeat top left;
background / * * / :/**/url("http://to_picture")
no-repeat top right;
background: / **/url("http://to_picture") no-repeat top right;
background / * * / :/**/url("http://to_picture")
no-repeat bottom right;
background: / **/url("http://to_picture") no-repeat bottom
right;
background / * * / :/**/url("http://to_picture")
no-repeat bottom left;
background: / **/url("http://to_picture") no-repeat bottom
left;;
width:700px;
padding:0;
margin:auto;
text-align:left;
}
| |
| John Cherry 2004-11-26, 12:17 pm |
| "ryan.fairchild@XXXXXXXXXX" <ryan.fairchild@XXXXXXXXXX> wrote in message news:<1101358803.532283.115750@z14g2000cwz.googlegroups.com>...
> Ahh damn, let me clarify.
>
> #container{
> position:relative;
> background:#999 url("http://to_picture") no-repeat top left;
> background / * * / :/**/url("http://to_picture")
> no-repeat top right;
> background: / **/url("http://to_picture") no-repeat top right;
> background / * * / :/**/url("http://to_picture")
> no-repeat bottom right;
> background: / **/url("http://to_picture") no-repeat bottom
> right;
> background / * * / :/**/url("http://to_picture")
> no-repeat bottom left;
> background: / **/url("http://to_picture") no-repeat bottom
> left;;
> width:700px;
> padding:0;
> margin:auto;
> text-align:left;
> }
Ryan,
Web Standards Solutions, by Dan Cederholm, has a discussion of
multiple background images using CSS, starting on page 57.
Basically, you have to assign background images to muliple elements
since each element can only have one background image.
In his example he defines three elements - a blockquote containing two
unique paragraphs - and gives each a different background.
| |
| Martin Bialasinski 2004-11-26, 12:17 pm |
| "ryan.fairchild@XXXXXXXXXX" <ryan.fairchild@XXXXXXXXXX> wrote:
> background:#999 url("http://to_picture") no-repeat top left;
Aside: url(), without the quotes.
| |
| ryan.fairchild@gmail.com 2004-11-26, 12:17 pm |
| Hmm. Well let me showyou what I want to do.
www.ryanfairchild.com
take a look at the corners I made. I cam up with the solution to do
this.
Make a picture with the corners for each side and palce it in a <div>
without padings or margins.
The only real reason I wanted a for different images in the background
was so it saved load times and made it so the user was not downloading
those top and bottom pics all the time.
If you have any suggestions for any easier way than I implemented this
please let me know.
| |
|
|
| Martin Bialasinski 2004-11-26, 7:20 pm |
| Lauri Raittila <lauri@raittila.cjb.net> wrote:
> in comp.infosystems.www.authoring.stylesheets, Martin Bialasinski wrote:
>
> Very aside. It is not really worth bandwith safe.
Gee, I had somehow remembered that quotes are illegal at this
place. They are not if I read the spec correctly.
string1 \"([\t !#$%&(-~]|\\{nl}|'|{nonascii}|{escape})*\"
string2 '([\t !#$%&(-~]|\\{nl}|\"|{nonascii}|{escape})*'
string {string1}|{string2}
url ([!#$%&*-~]|{nonascii}|{escape})*
"url("{w}{string}{w}")" {return URI;}
"url("{w}{url}{w}")" {return URI;}
| |
| ryan.fairchild@gmail.com 2004-11-27, 11:15 pm |
| Hey, guys thanks alot for the help I am just going to stick with my
current solution as it works pretty well.
|
|
|
|
| Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |