CSS background-image Visual Studio 2008

[bob]

Hi,
I am a plodder trying to do my first CSS.
I want to have a background image but have no idea where to place the
image file or how to address it in
background-image:url(myimage.jpg);

The modify style builder 'wizard' has a browse button but it shows
contents of App Data etc as empty. I have sprinkled my image file
liberally around the disc but still can't get the to 'see' it in the
Modify style dialog box.
thanks
Bob

 

[Brian Chabun]

Hi,
I am a plodder trying to do my first CSS.
I want to have a background image but have no idea where to place the
image file or how to address it in
background-image:url(myimage.jpg);

The modify style builder 'wizard' has a browse button but it shows
contents of App Data etc as empty. I have sprinkled my image file
liberally around the disc but still can't get the to 'see' it in the
Modify style dialog box.
thanks
Bob

The CSS has to be referenced from the html somehow.

inline

<div
style="background-image:url(image.jpg);width:100px;height:100px;"></div>

Now, the location of the image is relative to the place it is
referenced.

So, if you do it inline, then (if you do it as above) you have to have
the image in the same directory as the page with the html. Otherwise
you would have to put a path /images/image.jpg or images/image.jpg or
.../images/image.jpg or whatever is appropriate.

If you aren't doing it 'inline' (usually an external css file is
preferred) then the location given in the css file for the image is
relative to the location of the css file.

e.g. if the css file is /css/mystyle.css and the image is located
here: /images/image.jpg
Then in the css file you can use:
url(/images/image.jpg)
or
url(../images/image.jpg)

Using an external stylesheet is done by referencing in the header of
the page where the html is used:

<link type="text/css" rel="stylesheet" href="style.css">

then the html contains id/class attributes to make it accessible

<div id="myid" class="myclass"></div>

then the css stylesheet has the css:

#myid{
background: url(/images/image.jpg);
}
..myclass{
background: url(/images/image.jpg);
}


(My apologies if I ignored the 'style builder wizard' part of your
question.)

 

[bob]

Hi Brian,
Thank you for such a thorough reply.
I should be able to sort it out now.
regards
Bob