Jump to content
StudioWeb Forums

Background Images CSS

Recommended Posts

It's been a while, but I have another question guys. I am attempting to add a background image for my nav bar and for a contact form. However - when I add it to the CSS - it does not appear. It only will appear when I add it inline in the XHTML. Any clue of what I may be doing wrong?


As always - Thanks


Link to post
Share on other sites

Is the background being overridden by another CSS style? For example, I've accidentally done this in the past:


background: #000 url(...); background: #000;


which would mean the background image isn't showing up. Or, you could have another bit of CSS, completely separate, that is overriding the background since it's more specific. Usually Firefox's Firebug plug in is really useful at figuring out how the different styles cascade, and which styles are overriding each other. If you have the site online somewhere I could take a look.

Link to post
Share on other sites

Several possibilities:


1. Using purely images for navigation link via css background. Make sure the <a> link is define in the css with display: block along with height and width.


2. Using a background image in a div that contains the nav. Make sure the any reference within the nav does not have a background set.


3. Finally, carefully check your image path. One little typo, whether it be a hyphen, a period or even a the missing space after the background url and before the repeat-x or whatever. background-image : url('http://domain.com/images/house-clear.gif')[space here]repeat-x;

Link to post
Share on other sites

Hi guys -

Here is the temp. url. http://ww w. creat iveeyedia.com


The problem I am coming across is the navigation bar is not appearing when using the background in the CSS. I am having the same issue with the form background (beneath email sign up in lower right corner).


On another note - I am attempting to make the quote buttons blue on hover. I am adding the hover image on a: hover but it is sending the hover button off to the side. I have not used sprites yet - this may the reason?


*Please note - this is just getting the structure together. I still am updating the main image / background image as well as the buttons :D (Which I am actually going to school beginning the 26th for graphic design & multimedia so I can hone my skills as I need to).


Thanks Again




Link to post
Share on other sites

According to the site, you don't have any content within #navigation, and you are floating it, so it's disappearing. If you add content within the div, or add a height (and potentially add clear:both to #featured) the div will appear.


Same thing with the form -- you float it, but it has no content, so it disappears. If you add a height, or add content, it will appear.


I'm not sure how you are coding your quote button, but it's usually done with a background image that changes position. Usually it's one large image, with the normal state in the top left and the hover state in the bottom right. On hover, the background position changes from top left to bottom right.

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.
Note: Your post will require moderator approval before it will be visible.

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.

  • Create New...