Jump to content
Sign in to follow this  
meranda2100

Font And Image Problems

Recommended Posts

I am having problems with background images and fonts appearing in my page. I have the images saved in the same folder as my index page and on the same server as my home page, but the only page of my css that displays in my homepage is the background color for the body. The images work when I just put them in with html, but I want to have them repeat with css and I want to know what I am doing wrong. Here is my code for css and a link:body{background-color:#1E90FF}h1,h2,h3{font-family:Georgia;font-color:#B22222}#container{width:100%;margin:0;padding:0}#header{width:100%;background-image:url('http://recyclevinyl.comze.com/music%20image.jpg')}#content p{text-align:center;font-family:Andalus}#footer{background-image:url('http//recyclevinyl.comze.com/records%202.jpg')}http://www.recyclevinyl.comze.com(Norton says the site is unsafe, it is not, I am working on getting the rating changed.)Thanks, any help with be appreciated.Meranda 2100

Share this post


Link to post
Share on other sites

well, as far as your font-color, that's because to set the color of text, all you need to use is font: #b22222.As far as the images go, have you tried double checking the spelling? My guess is maybe you may need underscore _ instead of %20. Check your naming convention.

Share this post


Link to post
Share on other sites

on a side note, its always worth putting your site through this every once in a while if things aren't going right. And consider using a strict doctype. I did notice by looking at your source code you are using self-closing tags, which is a practice reserved for XHTML documents, and thus will cause errors in the browsers "eye" when using an HTML DTD.

Edited by thescientist

Share this post


Link to post
Share on other sites
well, as far as your font-color, that's because to set the color of text, all you need to use is font: #b22222.As far as the images go, have you tried double checking the spelling? My guess is maybe you may need underscore _ instead of %20. Check your naming convention.
Actually, using font: #b22222 is going to do nothing whatsoever. There is no font property that uses hexadecimal code. If you want to give color to your text, you use the color property.I recommend against shorthand coding, especially for font properties, unless you know what you're doing. By writing font: You're resetting all the properties to their default before writing the new ones.It means that you you write
font-size: 4em;font: Arial;

You might come across the surprise that your font is not actually 4em.I've seen people who also wonder why their background color disappears when they use the shorthand background property to add an image afterwards.

Share this post


Link to post
Share on other sites
Actually, using font: #b22222 is going to do nothing whatsoever. There is no font property that uses hexadecimal code. If you want to give color to your text, you use the color property.I recommend against shorthand coding, especially for font properties, unless you know what you're doing. By writing font: You're resetting all the properties to their default before writing the new ones.It means that you you write
font-size: 4em;font: Arial;

You might come across the surprise that your font is not actually 4em.I've seen people who also wonder why their background color disappears when they use the shorthand background property to add an image afterwards.

wow, im absolutely retarded. Yeah, I meant to write color: #........ yikes! sorry about the confusion. I'm sick, i must have mixed up which part he was supposed to drop.how embarrassing! :) Edited by thescientist

Share this post


Link to post
Share on other sites

Thanks for the suggestions, I changed the doctype to strict and tried to change use the _ for the images, but the my images will still not appear as background images. I have built most of the site with html, but I would really like two images to repeat behind the text, in the header and the footer. The easiest way to do this is CSS. I have had this work on other sites before, I don't know why it is not working now.This is my only CSS:#header{width:100%;background-image:url('http://recyclevinyl.site90.com/music_20images.jpg')}#footer{background-image:url('http://recyclevinyl.site90.com/records_202.jpg')}This is my site address: www.recyclevinyl.site90.comI would really appreciate any help.Meranda 2100

Share this post


Link to post
Share on other sites

well, i tried to view those images by putting that URL in the browser and got nothing. that might be a clue.

Share this post


Link to post
Share on other sites

Rather than an underscore, it should be %20.http://recyclevinyl.site90.com/music%20images.jpghttp://recyclevinyl.site90.com/records%202.jpgYou could also try leaving a space there.'http://recyclevinyl.site90.com/music images.jpg''http://recyclevinyl.site90.com/records 2.jpg'

Edited by Ingolme

Share this post


Link to post
Share on other sites
Rather than an underscore, it should be %20.http://recyclevinyl.site90.com/music%20images.jpghttp://recyclevinyl.site90.com/records%202.jpgYou could also try leaving a space there.'http://recyclevinyl.site90.com/music images.jpg''http://recyclevinyl.site90.com/records 2.jpg'
I was able to use the % and put the style sheet in the same folder as my index.html file and was able to get the background image to work. Thanks! (I just did not like how it looked so I just added images in html and centered them above the text.) Thanks again. Have a good day!

Share this post


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...
Sign in to follow this  

×
×
  • Create New...