.bodybackgrnd { - change from URL to folder source

F

fitwell

Real newbie re CSS here. I'm getting a bit of experiencing moving
around CSS and have played a bit with it. But need some help in one
particular area.

The trouble is in learning the language to translate code that was for
online-directing to something now folder-directed, mainly background
images. Since I couldn't figure out how to get the CSS to look in a
particular folder for an image for a particular page, I ended up
initially taking the coding completely out of the CSS and then adding
it to the html page, the way I do know how to do. That was great.
Background image now appeared. However, the "no repeat" value in the
CSS all of a sudden had significance since it now shows repeated
throughout the webpage whereas it only appeared at the top when the
CSS handled the image.

So, looks like I'll have to figure out how to convert path properly.
I did google this and look it up in TopStyle's help but I'm guessing
it's not common to switch URL-based coding to an HDD-based kind since
I didn't find anything.

The info in CSS is this:

..bodybackgrnd {
BACKGROUND-IMAGE:
url(http://www.stargate-sg1.com/home/common/images/background3A.jpg);
BACKGROUND-REPEAT: no-repeat
}

and I'm just pointing all graphics and the CSS file to a folder called
"images" in the same spot where the HTML files are (that way, no
absolute paths so the webpages can be moved anywhere and the coding
isn't restricted to one path - i.e., can be burned to CD and it'll
still work when that backup is brought back anywhere on the hdd).

So instead of being that URL to get the background image, it now
resides in this path, in other words:

images\background3A.jpg

How to get that info in the CSS?

Thanks!
 
R

rf

fitwell said:
Real newbie re CSS here. I'm getting a bit of experiencing moving
around CSS and have played a bit with it. But need some help in one
particular area.

The trouble is in learning the language to translate code that was for
online-directing to something now folder-directed, mainly background
images. Since I couldn't figure out how to get the CSS to look in a
particular folder for an image for a particular page, I ended up
initially taking the coding completely out of the CSS and then adding
it to the html page, the way I do know how to do. That was great.
Background image now appeared. However, the "no repeat" value in the
CSS all of a sudden had significance since it now shows repeated
throughout the webpage whereas it only appeared at the top when the
CSS handled the image.

So, looks like I'll have to figure out how to convert path properly.
I did google this and look it up in TopStyle's help but I'm guessing
it's not common to switch URL-based coding to an HDD-based kind since
I didn't find anything.

The info in CSS is this:

.bodybackgrnd {
BACKGROUND-IMAGE:
url(http://www.stargate-sg1.com/home/common/images/background3A.jpg);
BACKGROUND-REPEAT: no-repeat
}

and I'm just pointing all graphics and the CSS file to a folder called
"images" in the same spot where the HTML files are (that way, no
absolute paths so the webpages can be moved anywhere and the coding
isn't restricted to one path - i.e., can be burned to CD and it'll
still work when that backup is brought back anywhere on the hdd).

So instead of being that URL to get the background image, it now
resides in this path, in other words:

images\background3A.jpg

How to get that info in the CSS?

Thanks!
Click to expand...


Er, What? ...

I think you meant to ask: How to I apply a background to my <body>

Well:

body
{
background-image: url(images/background3A.jpg);
background-repeat: no-repeat
}


Cheers
Richard.
 
T

Toby A Inkster

rf said:
body
{
background-image: url(images/background3A.jpg);
background-repeat: no-repeat
}
Click to expand...

And note that the path is from the CSS file to the image, and not from the
HTML file to the image!

So if the CSS file is in the "images" directory:

body
{
background-image: url(background3A.jpg);
background-repeat: no-repeat
}

or if the CSS is in a "styles" directory:

body
{
background-image: url(../images/background3A.jpg);
background-repeat: no-repeat
}
 
B

Blinky the Shark

fitwell said:
Real newbie re CSS here. I'm getting a bit of experiencing moving
around CSS and have played a bit with it. But need some help in one
particular area.
Click to expand...

Yo, fitwell. I just lurk this one -- nothing to add, much to learn.
That said, welcome. You *will* learn stuff here. Enjoy!
 
F

fitwell

Er, What? ...

I think you meant to ask: How to I apply a background to my <body>

Well:

body
{
background-image: url(images/background3A.jpg);
background-repeat: no-repeat
}
Click to expand...

Nope. How to apply source that was previously URL-based to a
folder-based source.

What I don't know is if the "background-image:" command can only work
on a URL source for an image. That would change matters.

Then I'll just have to re-code, as I did initially, in the html
document itself. Remove the "background-image:" code from the CSS
itself and _then_ figure out if there is an html-based equivalent for
no repeat. That one I've never had to do so never run across it
before. Makes more sense that adding on a top of space to the image
itself, so that it does not, in effect, repeat.

Thanks anyway. Perhaps someone knows the answer re the coding.
 
F

fitwell

And note that the path is from the CSS file to the image, and not from the
HTML file to the image!
Click to expand...

Yes. Obviously. said:
So if the CSS file is in the "images" directory:

body
{
background-image: url(background3A.jpg);
background-repeat: no-repeat
}

or if the CSS is in a "styles" directory:

body
{
background-image: url(../images/background3A.jpg);
background-repeat: no-repeat
}
Click to expand...

I tried that and it didn't work. However, I didn't add the "../" in
front. Is this coding absolutely necessary?

I had tried changing the backslashes, necessary to HDD source coding,
to forward slashes and that still didn't work for I'm guessing that
the extra "../" is what makes the difference. Odd that
forward-slashing works here, but I'm guessing that's because the CSS
language interprets the forward slashes as backslashes ultimately (?).

Thanks, will give this a try.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Image issues 0
Help figuring out a directory permission change problem 1
Hover state on an element stuttering when I'm close to the edge, or move my mouse really fast 1
How to loop in folder through all excel files and all sheets using pandas? 0
How to change background color to fit shape 1
Change to background image. 5
Looking to change programming direction 1
Z-Index/Drop-down menu issues 2

Members online

No members online now.
Total: 40 (members: 2, guests: 38)
Robots: 475

Forum statistics

Threads
473,768
Messages
2,569,574
Members
45,048
Latest member
verona

Latest Threads

Top