472,143 Members | 1,318 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,143 software developers and data experts.

Questions on the background: url("http://"); property

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?

Jul 21 '05 #1
7 5709
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;
}

Jul 21 '05 #2
"ry************@gmail.com" <ry************@gmail.com> wrote in message news:<11**********************@z14g2000cwz.googleg roups.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.
Jul 21 '05 #3
"ry************@gmail.com" <ry************@gmail.com> wrote:
background:#999 url("http://to_picture") no-repeat top left;


Aside: url(), without the quotes.
Jul 21 '05 #4
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.

Jul 21 '05 #5
in comp.infosystems.www.authoring.stylesheets, Martin Bialasinski wrote:
"ry************@gmail.com" <ry************@gmail.com> wrote:
background:#999 url("http://to_picture") no-repeat top left;


Aside: url(), without the quotes.


Very aside. It is not really worth bandwith safe.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Jul 21 '05 #6
Lauri Raittila <la***@raittila.cjb.net> wrote:
in comp.infosystems.www.authoring.stylesheets, Martin Bialasinski wrote:

Aside: url(), without the quotes.


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;}
Jul 21 '05 #7
Hey, guys thanks alot for the help I am just going to stick with my
current solution as it works pretty well.

Jul 21 '05 #8

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

17 posts views Thread by Torbjørn Pettersen | last post: by
4 posts views Thread by Charles Law | last post: by
7 posts views Thread by chardish | last post: by
reply views Thread by leo001 | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.