Hey there!
I love the Twenty Ten theme myself. 🙂
Are you accidentally adding an extra forwardslash in your background URL?
Try changing this: background-image:url('/images/mybackground.jpg');
to this: background-image:url('images/mybackground.jpg');
That doesn’t appear to work either. Should I have the background image someplace else maybe? It’s currently in an images folder in the root directory. Was thinking maybe it needs to be in the media area then linked from there? If I remove the background color, then the area goes transparent thus leaving nothing there, no white space.
Actually, I think we might have just found your problem:
Okay, in your Theme folder, you have your twenty ten theme folder, right?
If you open that theme folder, you ought to see an images folder.
Deposit your background image in there and try using the code I recommended.
That said:
For practical theme-building purposes, theme-related images (like your background) ought to be uploaded to that specific folder within your theme.
Your background likely wasn’t showing because you have the image in the root directory and the stylesheet automatically looks within its THEME directory for the images folder (unless that was what you meant by root directory). To link it to the root directory folder of your website is possible, but the URL would be significantly different from a WordPress theme viewpoint.
I was hoping that worked… but still noting. However I did check to make sure the file was readable through the browser via linking directly to it located within the Theme’s images folder, and it displayed fine.
I’ve also tried using (notice the different quote types)
background-image:url(mybackground.jpg);
background-image:url('mybackground.jpg');
background-image:url("mybackground.jpg");
Oddly enough this actually worked whereas all other were a no go:
background: #fff url('images/mybackground.jpg');
Thanks for helping me through this.
Oddly enough
not odd at all;
in your list of styles:
#wrapper {
background-image:url('/images/mybackground.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:top;
background: #fff;
margin-top: 20px;
padding: 0 20px;
}
this line with the ‘Background – Shorthand property‘:
background: #fff;
was overwriting all other background styles before it.
using this line instead should have worked:
background-color: #fff;
http://www.w3schools.com/css/css_background.asp
Ahh I see, after a reread… css reads from bottom to up (i forget that sometimes)
Back to css school I go, as now I want to learn how to take the wrapper edges and corner them instead of making them square like they are.
