Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

12

Background color

  1. 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!

  2. 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.

  3. lorelle
    Member

    div #whatever { background-image: url(graphicname.jpg); <br /> background-position: top left; <br /> background-repeat: no-repeat; <br /> 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.

  4. 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!

  5. 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

  6. 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!

  7. 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?

  8. 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.

  9. 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.

  10. javajabber
    Member

    here's my page...see what a beautiful header I have?

    javajabber.wordpress.com/

  11. 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

  12. wank
    Member

    Try this:

    <br /> body { background-image: url ('http://javajabber.wordpress.com/files/2006/08/foamycoffee2.jpg') repeat;}<br />

    That sets the background image and makes it tile over the entire page.

  13. drmike
    Member

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

  14. cornell
    Member

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

  15. drmike
    Member

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

  16. 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

  17. 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; }<br /> #header { background: url("blah-blah/images/header.jpg") no-repeat bottom center; border: none; }

    And in another place you have:

    body {padding-top: 28px;}<br /> #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;}<br /> #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.

  18. 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.

  19. 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...)

  20. 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. ;-)

  21. javajabber
    Member

    I think I have figured out why the changes I am attempting to make to the background are not working.

    Correct me if I'm wrong...

    I am NOT allowed to make any changes to the theme I have chosen????

    I can ONLY use the themes listed under Presentation????

    AND, the theme I have chosen will not allow me to make any changes to it????

    I still can't figure out why Lorelle sees a different parameters than I actually see on my screen in my CSS Style edit box.

    I am only going to spend one more day (today) trying to figure this out. If I can't get the background image that I've uploaded to work, then I give up. I think I may sign up with a host where I can use WordPress and actually be able to write my own style sheet.

    I don't want to install Firefox and then start dealing with a whole other list of issues. I don't think that's where the problem is ... I think the problem is that I was under the impression that I could upload any theme I wanted and use it. Such appears to NOT be the case ... from what I gather in scouring WordPress Forums is that the ONLY templates I can EVER use are the ones presented here at WordPress.

    I could be wrong. Won't be the first time.

  22. drmike
    Member

    I see the background image now. *shrug* Did a search of the style sheet and the outputted page. Not sure why it didn't come up.

    I am NOT allowed to make any changes to the theme I have chosen????

    The themes are shared on the WordPress Platform. If you were to make a change to the theme, then you would be affecting it for everybody using that theme and the same if someone else changed something on it. Only way around that is the new CSS style editor.

    I can ONLY use the themes listed under Presentation????

    Yes, this is explained in the FAQ at the top of the forums.

    AND, the theme I have chosen will not allow me to make any changes to it????

    Only with the new CSS editor can you make changes to the theme.

    I think I may sign up with a host where I can use WordPress and actually be able to write my own style sheet.

    Please remember that this is WordPress Multiuser that we're running here. There are differences between this platform and the normal WordPress software.

    You may want to take a few minutes and read the FAQ posted at the head of the forums as it appears you have questions on what you can and can't do here.

  23. javajabber
    Member

    Dr. Mike:

    You wrote: Only with the new CSS editor can you make changes to the theme.

    I have paid my $15. I paid it BEFORE I started this odessy. I have the new CSS editor. I have tried. NOTHING changes.

    I have used Sandbox, picked a blank CSS Style, and STILL the style is there. It should have been blank, right? Well, it wasn't.

    I have deleted entire sections in the style sheet shown for whatever theme I've selected and nothing changes. Nothing.

    I have inputted every single suggestion of syntax people have given me here. Nothing changes.

  24. alunsalt
    Member

    Could it be a caching problem? When I make a change that affects graphics I press shift as well as reload to clear them from the cache. I've had a look at your background and it's accessible to me.

    Your current theme is Connections so I can't see your style sheet right now to see the problem.

  25. javajabber
    Member

    Nope, it's not a cache problem. I clear that every hour or so...a habit I've been into for years.

    What do you mean it's accessible to you? I thought I was the only one who had access to the files I uploaded? How is it possible that others have access to stuff I upload to my account?

    Maybe I'm just not understanding you correctly. Could be, I'm only on my 2nd cup of coffee!!!

    Thanks.

  26. alunsalt
    Member

    I mean I can see it. I've edited my stylesheet and am using your background as a demonstration.

    If you:
    copy my sheet,<br /> activate Sandbox as the theme<br /> select the no CSS skin<br /> edit css<br /> paste my sheet into your css box<br /> click save stylesheet
    then you'd have a copy of my site. Obviously you'd want to change colours and layout, but it'd give you a body declaration that works for the background image.

    I have access to the images, because I assume they're stored as images for blog posts. I can only see them, I can't delete them.

  27. javajabber
    Member

    alunsalt:

    If you were here, I'd kiss the ground you walk on!

    I did exactly as you said. The background pic finally showed up!

    It's not big enough, but I'll tweak the pic and re-upload the new size. I don't like the look when I repeat it.

    The columns are out of whack ... so I'll have to figure out how to fix that (I don't like where they are placed).

    BUT, at least the style saved and the background pic is in place!

    Thank you...thank you...thank you!

  28. alunsalt
    Member

    Well you should be able to throw out everything you don't like or want to change now, so long as you leave the body declaration. If you don't want it to repeat then
    background-repeat:none;<br /> background-attachment:fixed;
    Would make it stay on screen rather than scrolling out of view.

    Glad that helped.

  29. javajabber
    Member

    Alunsalt:

    I'm nominating you for Sainthood!

    It works exactly like I had hoped for the last 3 days.

    Thank you from the bottom of my heart!

    It's perfect!

    JJ

  30. lorelle
    Member

    One of the problems that arises in editing pre-existing Themes (rather than using the Sandbox Theme) is that the styling may be so strong (to put it simply) that you just can't overwrite it. If they have set a specific element's parent/child relationship very firmly, there is no way you can override it without change the core stylesheet, which you can't.

    You can only ADD styles and maybe tweak them, but you can't overcome what's solidly done.

    Though, as alunsalt described so beautifully, you can take their Theme's CSS and copy and paste it into the Sandbox Theme's NO CSS Then, and it "should" work, though it might not find all the embedded images depending upon how they were linked. Then you can dig into this fresh copy of the stylesheet and fix what you couldn't before.

    Not easy, but doable.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags