Jump to content

Background Image


Recommended Posts

Ive been trying to use a background image for my frame and cant seem to get the syntax right. Ive used <p> with a class, p.back

p.back  {background-image: url (../../../graphics/misc/back_grad.gif); background-repeat: repeat-x;}

Thought it be missing quotes as some sites have those in, so i tried

p.back  {background-image: url ('../../../graphics/misc/back_grad.gif'); background-repeat: repeat-x;}

Tried with "marks as well and that didnt work either. Is it the url part? I also tried src and img src withouth any luck. Thanks Darkspire

Link to post
Share on other sites
Your syntax is valid but the path to the image should be:
p.back{background-image:url('../graphics/misc/back_glad.gif)'}

I'm not sure how you can tell the file path without knowing where the image is in relation to the file containing the frame. OP. What is your folder setup? Where are the files in relation to each other? each ../ moves you up one directory from the calling file. So you are saying to your stylesheet to go up three directories from the stylesheets location, then look for graphics/misc/file.jpg. Does that apply to you?
Link to post
Share on other sites
I'm not sure how you can tell the file path without knowing where the image is in relation to the file containing the frame. OP. What is your folder setup? Where are the files in relation to each other? each ../ moves you up one directory from the calling file. So you are saying to your stylesheet to go up three directories from the stylesheets location, then look for graphics/misc/file.jpg. Does that apply to you?
I was working under the idea that the call exceuted from where it was called, that is from the HTML folder layout below. Folder layout:
Folder with the HTML in ^ Subject folder ^ Pages folder ^ Graphic folder /folder misc with the graphic file in

Your saying it is from the folder with the CSS file in? I just copied the graphic into the CSS folder and tried it and still not working, are you sure my syntax is correct?

p.back  {background-image: url ('back_grad.gif'); background-repeat: repeat-x;}

Thanks Darkspire

Link to post
Share on other sites
Your saying it is from the folder with the CSS file in? I just copied the graphic into the CSS folder and tried it and still not working, are you sure my syntax is correct?
p.back  {background-image: url ('back_grad.gif'); background-repeat: repeat-x;}

File paths are relative to the CSS, yes. I think whitespace is unimportant, but try removing the space between 'url' and the opening '('Also, try clearing your browser cache to make sure you're pulling a current version of the stylesheet.
Link to post
Share on other sites
File paths are relative to the CSS, yes. I think whitespace is unimportant, but try removing the space between 'url' and the opening '('Also, try clearing your browser cache to make sure you're pulling a current version of the stylesheet.
Yes :good: that worked, i removed the space. I have 'whitespace' between all the defines in my CSS file, never mattered with the others though. Still thats another lesson learned! Thanks Darkspire
Link to post
Share on other sites
Yes that worked, i removed the space. I have 'whitespace' between all the defines in my CSS file, never mattered with the others though. Still thats another lesson learned!
Well, I think whitespace is actually supposed to separate the different properties/parameters of a declaration. For example:border: 1px solid blue;1px defines border-width, solid defines border-style, and blue defines border-color. The amount of whitespace in this situation doesn't matter as long as it's there.Since url(...) is one property/parameter it cannot have whitespace in it, except between the parenthesis like url( 'images/img.jpg' ).
Link to post
Share on other sites
File paths are relative to the CSS, yes. I think whitespace is unimportant, but try removing the space between 'url' and the opening '('Also, try clearing your browser cache to make sure you're pulling a current version of the stylesheet.
For the record, it is relative to the calling file. The CSS file may be included in an HTML file, but it is still the CSS file asking for a reference to the asset.
Link to post
Share on other sites
For the record, it is relative to the calling file. The CSS file may be included in an HTML file, but it is still the CSS file asking for a reference to the asset.
That still makes it relative to the CSS. :P But yes, generally speaking a file path is relative to the file from which it is referenced. For example, an img tag's src attribute is relative to the HTML file while a background-image url is relative to wherever the CSS is located. If the CSS is external, the path is relative to the CSS file, but if the CSS is embedded or inline the path is relative to the HTML file.
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...