Can someone please tell me the correct syntax for adding an image to a header that already has a background-color using an external CSS?
Here are my settings for the header:
#header { backgroung-color: #C9C9C9; border-bottom: 2px solid #ddd; width: 100%; }
#header h1 { color: #004b6f; font-size: 24px; margin: 0 0 3px; padding: 20px 18px 0; }
#header p { color: #004b6f; font-size: 11px; font-weight: bold; margin-left: 20px; }
Thank you.
Kelly
Kelly Horst
Registered User
85 posts
Fe Pixie
Registered User
2,900 posts
background-image:url('path/image.gif');
Have fun
~ Fe Pixie ~
~ Fe Pixie ~
Kelly Horst
Registered User
85 posts
Fe Pixie,
So there are no spaces between the colon and url nor between url and the parenthasis?
Kelly
So there are no spaces between the colon and url nor between url and the parenthasis?
Kelly
Janys Hyde
Ambassador
6,076 posts
I think the general rule is to leave as few spaces as possible in your code anyway.
Kelly Horst
Registered User
85 posts
Okay, when I get home this morning I will have to try using Fe Pixie's code though when I tried it yesterday (with spaces) it didn't work. I'll just have to wait for an hour or so before I can try again.
Thanks.
Thanks.
sstovert@satx.rr.com
Guest
5,410 posts
Kelly Horst wrote:
So there are no spaces between the colon and url nor between url and the parenthasis?
So there are no spaces between the colon and url nor between url and the parenthasis?
No spaces.
background-image:url('bg.gif');
CoffeeCup... Yeah, they are the best!
Fe Pixie
Registered User
2,900 posts
if you're still stuck - note that the image path is relative to the css file - not the page....
Have fun
~ Fe Pixie ~
~ Fe Pixie ~
AD99nl
Ambassador
1,130 posts
This is how I do it. I have all my images in a folder called 'images' then in the css I have under the section header the folowing example below:
#header {float:left; display:inline; padding:0 17px; width:980px; height:150px; color:#000; border-top:2px solid #000; background:#000 url("../images/header.gif") right bottom no-repeat}
#header {float:left; display:inline; padding:0 17px; width:980px; height:150px; color:#000; border-top:2px solid #000; background:#000 url("../images/header.gif") right bottom no-repeat}
The Philosopher
Registered User
2,038 posts
ad99wd wrote:
This is how I do it. I have all my images in a folder called 'images' then in the css I have under the section header the folowing example below:
#header {float:left; display:inline; padding:0 17px; width:980px; height:150px; color:#000; border-top:2px solid #000; background:#000 url("../images/header.gif") right bottom no-repeat}
This is how I do it. I have all my images in a folder called 'images' then in the css I have under the section header the folowing example below:
#header {float:left; display:inline; padding:0 17px; width:980px; height:150px; color:#000; border-top:2px solid #000; background:#000 url("../images/header.gif") right bottom no-repeat}
Just to make sure our guest understands:
The ".../" you see backs out of the css folder and into the image folder. If you just want to place your image folder in your css folder then you do not need ".../"
The philosopher has not done philosophy until he has acted upon the mere conviction of his idea; for proof of the theory is in the act, not the idea.
My Web Development Company: http://www.innovatewebdevelopment.com (Created with Coffee Cup Software).
My Personal Website: http://www.EricSEnglish.com
My Web Development Company: http://www.innovatewebdevelopment.com (Created with Coffee Cup Software).
My Personal Website: http://www.EricSEnglish.com
sstovert@satx.rr.com
Guest
5,410 posts
Just to make sure our guest understands
LOL - We're all guests on this fine CoffeeCup forum.
CoffeeCup... Yeah, they are the best!
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
