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

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

ryan.fairchild@gmail.com - 25 Nov 2004 04:56 GMT

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?

Reply to this Message

ryan.fairchild@gmail.com - 25 Nov 2004 05:00 GMT

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;
}

Reply to this Message

John Cherry - 26 Nov 2004 13:44 GMT

> Ahh damn, let me clarify.
>
[quoted text clipped - 17 lines]
> 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.

Reply to this Message

ryan.fairchild@gmail.com - 26 Nov 2004 15:02 GMT

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.

Reply to this Message

Martin Bialasinski - 26 Nov 2004 14:20 GMT

> background:#999 url("http://to_picture") no-repeat top left;

Aside: url(), without the quotes.

Reply to this Message

Lauri Raittila - 26 Nov 2004 16:51 GMT

> > background:#999 url("http://to_picture") no-repeat top left;
>
> Aside: url(), without the quotes.

Very aside. It is not really worth bandwith safe.

Signature

Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>

Reply to this Message

Martin Bialasinski - 26 Nov 2004 17:29 GMT

>> 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;}

Reply to this Message

ryan.fairchild@gmail.com - 27 Nov 2004 23:34 GMT

Hey, guys thanks alot for the help I am just going to stick with my
current solution as it works pretty well.

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / November 2004

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