Background color

  • Author
    Posts
  • #23779

    javajabber
    Member

    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!

    #24137

    nosysnoop
    Member

    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.

    #24146

    lorelle
    Member

    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.

    #24156

    javajabber
    Member

    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!

    #24158

    cornell
    Member

    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

    #24159

    javajabber
    Member

    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!

    #24160

    javajabber
    Member

    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?

    #24167

    lorelle
    Member

    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.

    #24175

    javajabber
    Member

    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.

    #24176

    javajabber
    Member

    here’s my page…see what a beautiful header I have?

    javajabber.wordpress.com/

    #24178

    cornell
    Member

    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

    #24183

    wank
    Member

    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.

    #24184

    drmike
    Member

    What would it be if you wanted to expand the image to fill out the entire window instead of repeat?

    #24186

    cornell
    Member

    I would think you could use no-repeat. Just make the image big enough to fill the screen!

    #24188

    drmike
    Member

    Yeah, I just rather use a smaller image and have it fill in.

    #24192

    javajabber
    Member

    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

    #24206

    lorelle
    Member

    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.

    #24210

    javajabber
    Member

    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.

    #24217

    drmike
    Member

    – 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…)

    #24235

    lorelle
    Member

    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.