Topic: CSS background image help

Hi everyone,

I've been battling with this for a few days now, I can't figure this out despite my best googling attempts.

So, i've been working off Simply Rails 2 by Patrick Lenz, and am trying to get my own background image in the CSS.

I've tried just about every CSS tutorial for background images possible and just can't get it to load properly. Surely, my newness with working with CSS and RoR is to blame.

 body {
  background-color: #64AA09;
  margin: 15px 25px;
  font-family: Helvetica, Arial, sans-serif;
}

#content {
  background-color: #fff;
  border: 10px solid #AA9f09;
  padding: 10px 10px 20px 10px;
  overflow: hidden;
}

* html #content {
  height: 1%;
}

#notification {
  border: 5px solid #9c9;
  background-color: #cfc;
  padding: 5px;
  margin: 10px 0;
}

.fieldWithErrors {
  border: 5px solid #f66;
}

#vote_score {
  float: right;
  color: #9c9;
}

#vote_form {
  margin: 10px 0;
}

#vote_form input {
  padding: 3px 5px;
  border: 3px solid #393;
  background-color: #cfc;
  text-decoration: none;
  color: #393;
}

#vote_form input:hover {
  background-color: #aea;
}

#vote_history {
  padding: 5px;
  margin: 0;
  list-style: none;
  border: 3px solid #ccc;
  background-color: #eee;
  float: right;
  color: #999;
  font-size: smaller;
}

#login_logout {
  float: right;
  color: #302D03;
  font-size: smaller;
}

#navigation {
  list-style: none;
  padding: 5px 0;
  margin: 0;
  text-align: center;
}

#navigation li {
  display: inline;
  padding: 0 5px;
}

#navigation li a {
  color: #fff;
}

.story {
  float: left;
  width: 50%;
}

.story h3 { margin-bottom: 0; }

.story p  {
  color: #666;
  font-size: 0.8em;
}

h2 {
  clear: both;
  margin: 0;
  padding: 10px 0;
}


I have the background i want to use located in /public/images/stripes.png.
I have tried using background-image: url(); (with every possible directory in there to no evail), do I also have to enter in code within my one of my view files as well.

I really appreciate any help

Thanks,
Seth

Re: CSS background image help

Seth,

Try using using "background: url(../images/stripes.png);" as a style. That what I've used for my app. As long as the stylesheet is saved in /public/stylesheets (it *is* saved there, right?) you should be set.

Re: CSS background image help

You my friend...have made my day! Thanks so much.

Last edited by snizneth (2008-07-31 18:59:29)

Re: CSS background image help

A really good place to start learning CSS is at W3Schools.com. Just go to http://www.w3schools.com/css , and go through beginning to end, and it also has a very useful CSS reference on the left hand side as well. Real good site. Thats actually where I learned how to write HTML initially. We all started somewhere right? tongue

Re: CSS background image help

Freddy.... you made my day as well!!! Been battling with this for 4 hours now!

Re: CSS background image help

freddy thnks a lot..my apps looked plain without background images for almost a year..hats off to u

Re: CSS background image help

a very good way to debug is also if you get firebug.

Re: CSS background image help

I know this is an old post, but I have to put in my Thank You!!! Now if I can only get my flash to work.

Re: CSS background image help

hey freddy thank you very much..i hav registered just to say this....it was  really awesome..

Last edited by gsmuralee (2009-11-28 06:59:36)

Re: CSS background image help

W3Schools is horribly outdated and too often just blatantly wrong. See W3Fools.com for an accurately scathing detailed explanation.

Better resources:

And numerous others.

Get educated, if for no other reason than keeping your site from being cracked by all and sundry.

Re: CSS background image help

Would you mind sharing how you fixed it? So that those in the future who are searching and come across this thread, can have an idea of a possible fix?



http://www.61designstreet.com/