Background color
-
Okay, I’ve figured out the header. Designed a nice pic with graphics and put it in place. I haven’t figured out why/how I downloaded Sandbox but that’s not what is showing up (I copied/pasted into the CSS editor, but when I look at Presentation, it’s showing the first theme I chose instead of Sandbox).
How do I change the background color from gradient Blue to whatever color I want it to be or even better, how do I put a jpg in the background instead of a color.
Look here to see what I mean: http://javajabber.wordpress.com/
Thanks…I’m learning! I now know what CSS means! Have been reading http://www.w3schools.com, but even though I see the info on HOW to put the code in, I don’t know WHERE to put it in and
I have an image on my hard drive I want to use as background. It’s called “coffeebubbles.:”
But where does it go? How do I upload it so I can use it?
Here’s the code from w3school…
<html>
<head><style type=”text/css”>
body
{
background-image:
url(‘bgdesert.jpg’)
}
</style></head>
<body>
</body></html>
Thanks…I’ve ordered a book from Amazon.com (WordPress 2: Visual QuickStart Guide (Visual QuickStart Guides)), maybe that will help more, but I’m rather impatient!
-
I haven’t bought that new CSS thing, so I have no clue what it looks like. Is it like Blogger with an open template and we can go and edit all the codes? I use to change the codes like every week so I could have a new background color and new header and background designs. One time I had the background with blue glittery stars. lol If it’s anything like the Blogger template, I could probably understand it and help you.
-
div #whatever { background-image: url(graphicname.jpg);
background-position: top left;
background-repeat: no-repeat;
background-color: green; }There are a lot of ways to play with this. If you want the image to repeat across the page but not down, use repeat-x. If you want the image to sit on the left side of the section, use background-position: top right, and so on. This will get you started.
-
Lorelle…
Thanks for the code. Here are a couple of questions…
the ” #whatever ” … is that what I’m actually supposed to type?
the ” url (graphicname.jpg) ” … if the pic is on my hard drive, where is the url it
is coming from??? Do I upload it to somewhere??? That’s what’s got me so confused! Where do I upload it TO so I can use it?
Finally, I want the pic to be the entire background, as though it was a mat to a picture that is framed (gee, I hope I said that clearly).Thanks!
-
Java:
1. The #whatever simply means that you can it what you like.
2. for the header graphic start a new post, upload your pic, paste it to the post and then copy the url (http ://part) into the url(graphicname.jpg) replacing graphicname with the location of the image. And yes, using Lorelle’s code will give it the full background as long as the graphic is a reasonable size.HTH
COllin
-
Cornell…
Thank you for the early morning response!
There’s a word missing from this line that you posted:
1. The #whatever simply means that you can (word missing!!!) it what you like.
I will definitely try the code today. Does it matter where I place it within the CSS
style sheet?Have a great day!
-
Okay…here’s my CSS entry for the image I wanted for the background (but it won’t show up)…
div #background { background-image: url http://javajabber.wordpress.com/files/2006/08/foamycoffee2.jpg;
background-position: top left;
background-repeat: no-repeat;
background-color: green;
}What’s wrong with it? Why won’t it show up?
-
The div #whatever is representative of whatever DIV or CLASS you want the background image to show in.
For example, if you want it in the header it would be div #header { }. If you want it in the body, it would be body { }. If you want it in the H1 tag inside of the header DIV, it might be #header h1 { }.
The # indicates an ID. A period indicates a CLASS, “sections” of style references. Without the right reference, you will never see your background image or any of the styles because it isn’t in the HTML.
I also recommend Designing Headers from the WordPress Codex, the online manual for WordPress users, everywhere.
-
Lorelle:
I already have the header. It’s exactly the way I wanted it.
I’m trying to replace the background color of blue with another image that I have
already uploaded.I just can’t seem to get it to show up.
I don’t want it left or right. I want it as the background image.
I have tried a zillion different setups and nothing is working. I don’t know why and
I don’t have my book yet.I’ve read a zillion instructions on how to do this, but nothing is working.
I give up.
-
-
Unfortunately I have no requirement to purchase the upgrade to CSS modification so I can’t tell you the exact div that you’ll need to change to get the background.
On my own blog it’s the “body” tag for the page background. You’ll need to have a look through the CSS file and see if that’s available.
Collin
-
Try this:
body { background-image: url ('http://javajabber.wordpress.com/files/2006/08/foamycoffee2.jpg') repeat;}
That sets the background image and makes it tile over the entire page.
-
What would it be if you wanted to expand the image to fill out the entire window instead of repeat?
-
I would think you could use no-repeat. Just make the image big enough to fill the screen!
-
-
The problem is that I can’t seem to call up the image that I uploaded. If I could just figure out how to get it on the page I can manipulate it where I want it to be.
If I take the header image and stretch it, it won’t go any further than where it’s at right now.
I’m beginning to think that the style sheet I am trying to modify just won’t let me do it because I don’t know enough about the code to figure out what is stopping me.
I have books now…maybe I’ll figure it out on my own. I tried Wank’s suggestion…it didn’t work.
I KNOW the image I uploaded is there. I can access it on this side.
Thanks anyway folks.
JavaJabber
-
This is what you currently have put in using the CSS Editor, which creates embedded styles by the way (the blah-blah is just to shorten the URL and maintain some site privacy):
body { background: url("blah-blah/images/bg.jpg") repeat-x top center fixed; border: 0; }
#header { background: url("blah-blah/images/header.jpg") no-repeat bottom center; border: none; }And in another place you have:
body {padding-top: 28px;}
#header {font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;text-align: left; background: url(blah-blah/08/cropped-coffeecup22.jpg); width: 700px; height: 200px; margin: 0px;}
#header * { display: none;}This is just too much information. Use one or the other. But the fix is here:
body { background-color:blue;}Get rid of all the other styles in the body tag, and the rest of the #header information is fine. I’d kill the top padding on the body tag. I know you want it to drop below the WordPress.com bar, but few people see that. But that’s up to you.
-
Lorelle:
Now I KNOW something isn’t right…
“body { background: …” and “body {padding-top: 28px;}…”
are NOT a part of my style sheet. I’ve gone through it line by line. So, I don’t know
where you are seeing that, but it’s not what I see at all. None of that is in my style sheet.Somehow what you are seeing and what I actually have are totally different. I have NONE of the lines you put in your post.
Therein, I would suppose, is the answer to my problem. I just don’t know how it’s possible that we aren’t seeing the same thing.
Thanks.
-
– Copy and paste your current CSS into the editing window.
Replace this line in your CSS file:
background-color: #454C67;
with the one above.
Currently it’s using just a color generated by the browser instead of an image for a background.
Hope this helps,
-drmike(OK, I know a little about CSS…)
-
Actually, drmike, the Theme features a graphic in the background. Until the background graphic is gone, no color will be seen.
Javajabber: Get Firefox. Install the Firefox Web Developer Extension‘s EDIT CSS feature.
It will open a sidebar and there will be two tabs, one for stylesheet and the other for EMBEDDED STYLES. That’s where the CSS Editor styles get put.
In the Edit CSS feature with Firefox, you can change your styles right in that sidebar window. That’s how I found all the styles and how getting rid of the image in the body tab made the color go away and I could then change it to something else. I changed it to yellow. WEE!
This is all explained in Secrets of WordPress Theming with much more detail. Once you play around with the CSS in the sidebar of the Edit CSS Firefox Extension, copy the information to your CSS Editor in WordPress.com and see if it works for you.
If it doesn’t, you might not be able to override that body code in the Theme you have chosen. Save your CSS in the CSS Editor and change Themes to find one that will allow you to override their styles.
This ain’t easy, so take your time.
Oh, one last tip. If you view another web page in Firefox while working with the Edit CSS feature, you will lose all the edits you just made because it will load in the styles of the new page. Been there. Whined a lot. Don’t do it. ;-)
- The topic ‘Background color’ is closed to new replies.
WordPress.com Forums 
