By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
444,190 Members | 1,653 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 444,190 IT Pros & Developers. It's quick & easy.

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

P: n/a
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
Share this Question
Share on Google+
7 Replies


P: n/a
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

P: n/a
"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

P: n/a
"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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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.