Need help? Check out our Support site, then


Can't make my stupid background scroll . . .

  1. I just redid my blog [HERE] using the CSS upgrade, and it's pretty decent so far, but a few things are bothering me. For one, I cannot seem to make my background scroll with the page. I've tried changing the "background-attachment" to "scroll," and even tried the important tag (yes, with the exclamation), but nothing. Anyone know what else I could do?

    Also, I've been trying to change the image that appears alongside my title. I tried the suggestion on < a href="http://en.forums.wordpress.com/topic/removing-flowers-from-rounded-theme?replies=6#post-42996" target="_blank">THIS POST, but it only jumbles my image and the one present together. How can I fix this?

    By the way, I'm using the Neat Theme. Thanks in advance!

  2. http://jt4breakgfast.wordpress.com/ does not exist according to WordPress. I'm sent to the signup page.

  3. Oh those crazy "g" and "f" keys.. http://jt4breakfast.wordpress.com/

  4. Hmmm, I've tried a couple things that didn't work, and I'll have to let someone else take a shot at it. I'll "deltalook" this. He is really the only one here with heavy CSS experience.

  5. Can't help you on the background scroll but to hide the image to the left of the post title, try this:

    img.lefth2img {
    	display:none;
    }

    If you want to change the image, I would think that you would just have that section be:

    img.lefth2img {
    	background: url(image url) no-repeat;
    }
  6. Or maybe you do the first one and then use the h2 selector for the background image you want to show.

  7. I think I figured out how to make the background scroll. Here's what I did:

    body {
    background:color:#CE7B02 repeat-x top center fixed;
    border:none;
    font-size:63%;
    font-family:'Lucida Grande', Verdana, Arial, Sans-Serif;
    background-color:#CD7A02!important;
    background-image:url(http://img.photobucket.com/albums/v468/mal1986/JT4Breakfast/LoveThemeBG2.jpg)!important;
    background-attachment: scroll
    color:#6F815D;
    text-align:left;
    margin:0;
    padding:0;
    }

    Now I took out a couple of lines in your CSS, but I'm not sure if they need to be there or not. The key on the background-attachment thing seems to be that there is NO semicolon behind the word scroll (which is totally different from every other thing I've seen in CSS but hey - whatever works)

    I found that here http://www.w3schools.com/css/pr_background-attachment.asp

  8. Haha, Thanks elledoesit for correcting the misspelling! Vivian, I can make the image disappear using your suggestion, but I still can't seem to replace it.

  9. Thanks Vivian, that worked!

  10. Post the link to the image you are trying to replace it with. Let me see what I can come up with.

  11. Hmm - I'm not having any luck with that. Delta will have to work on it.

    And I see that your bg is NOT scrolling. Take the semicolon out after the word scroll

  12. New issue . .. I put up the background I'd wanted from the beginning and edited the position in CSS. When I look at it in the preview, it looks perfect, but when I go to my site, the background is lower than it's supposed to be. What gives?

  13. The CSS editor seems to automatically add the semicolon when I remove it . . . in my preview it scrolls, but then my bg is in the correct position as well . . . I don't know what's going on.

  14. Hmm - you are over my head now :( I think it may have something to do with the position being relative or absolute but I'm not sure. Delta is the one you need to wait for.

    As for the CSS editor adding in that semicolon - that's something that you should report to support. (Since the fixed also should not have a semicolon after it, it's not having any effect on the CSS.)

  15. Ok, I will wait for Delta. Thanks for responding so quickly, and repeatedly. It's been a big help.

  16. Sorry I wasn't of more help.

  17. Someone help! I'm still having trouble with my background position not being to true to the CSS editor's depiction of it. If you look at my blog without logging into WordPress, the background is virtually seamless with the header. However, if you're signed on as a wordpress user, it looks completely wonky.I am not able to make my header size larger than my page in this theme. If someone could make some suggestions or give me the name of a theme whose header and page width are separated, that would be amazing!

  18. When you said your background didn't scroll it really confused me and didn't know what exactly you wanted. I now understand that you want the background to move down the equivalent to the admin bar's height when logged in.

    Now, do you really need the RetroLoveThemeBackG3.jpg file? is that "duplicate" effect you want to give to your header? if so, let me know so that I can try to come up with a solution to your problem.

    BTW, I would recommend you to not use Lucida Grande, it's a font really hard to read especially if it's small... just a suggestion.

  19. No, I don't want the duplicate effect. The only reason I have that background image is so the entire header can be seen (i.e. the end of the wings on the the birds on the right, and the colorful embellishment on the left). It's suppose to be one seamless header, but as I said, I can't change the header size without changing the content size as well, which I don't want to do.

    Also, I'll look into using a different font. Thanks!

  20. I can't change the header size without changing the content size as well

    Yes, you can. If you create a background image for #page using a technique similar to faux columns, you should be able to achieve the results you want.

    I can't give you more details right now, but at lunch time I'll have more time and I will explain in more detail.

  21. Hey devblog - if you are going to be around a bit more, we can add a tag for you, too :) If we do that (let's call it devlook) you can subscribe to the RSS feed for it and answer the tough questions, like this one. Would you be willing to do that?

  22. Can't wait! Thanks.

  23. Vivian,

    Thanks, but let's wait to see if I'll be able to be around more. If I can, you know I'll be more than happy to assist.

    BTW, thanks for your compliment on my web app :)

    JT4,

    So you want your blog to look like this, right? Well, let's modify your CSS code to accomplish this.

    I took the liberty of modifying your header image and created a background image for your contents. You can get them from here:

    http://www.coderlab.us/samples/jt4/header_bg.jpg
    http://www.coderlab.us/samples/jt4/contents_bg.gif

    After you get them, would you please let me know so I can delete the files, and sample page from me server? Thanks

    Now the fun part.

    In your "body" definition you have this:

    background:color:#CE7B02 repeat-x top center fixed;
    ...
    ...
    background-color:#F1E9CE!important;

    This is incorrect. The syntax of the first line is wrong. You cannot set the value of a property with other properties like that. The correct way would be:

    background: #f1e9ce;

    This will render unnecessary the second property: background-color:#F1E9CE !important;. Oh, and you don't need the !important rule. Also, I'd recommend you to use shortcuts instead. If you didn't know background is the shortcut of the background-xxx properties.

    So, I'd recommend you to write your definitions like so:

    body {
    	background: #F1E9CE;
    	border:none;
    	font-size:66%;
    	font-family:'Lucida Grande', Verdana, Arial, Sans-Serif;
    	color:#6F815D;
    	text-align:left;
    	margin:0;
    	padding:0;
    }
    
    #page {
    	background: #CABDBF url(contents_bg.gif) top left repeat-y;
    	width:1000px;
    	margin: 0 auto;
    	padding: 0;
    	clear: both;
    	position: relative;
    	overflow: hidden;
    }
    
    #header {
    	height:457px;
    	width:1000px;
    	background: transparent url(header_bg.jpg) top left no-repeat;
    	clear: both;
    	margin: 0;
    	padding: 0;
    }
    
    #content {
    	float:left;
    	background-color:#CABDBF;
    	width:493px;
    	overflow:hidden;
    	margin: 0 0 0 50px;
    	padding:20px 0 0 25px;
    }
    
    html > body #content {margin: 0 0 0 100px;}
    
    #sidebar {
    	width:227px;
    	border-left:1px solid #896A70;
    	margin:0 0 0 637px;
    	padding:10px 0 20px 25px;
    }
    
    #footer {
    	text-align:right;
    	clear:both;
    	height:50px;
    	margin-right: 100px;
    	padding:20px 15px 0 0;
    }

    Those are the only definitions you need to modify.

    I'd recommend you also to move "#header h1" and "#header .description" below the "#header" definition. Even though it doesn't matter where you define your elements, it's more organized and easier to find them later.

    Those are the changes you need to make in order to make your blog look the way you want. I tested the code in Firefox 3 and IE6, so you should be okay with those browsers. Although I haven't tested it in Safari nor Opera, I'm bet it'll look good in those too.

    On a side note, I'm glad that wp.com is finally allowing the use of child selectors... sometimes IE6 can be a real pain and child selectors help to work around the "headaches" IE provides.

    HTH

  24. sorry, I linked to your blog instead of my sample. Here's the link to the sample page:

    (URL deleted - Hanni)

  25. Genius! Thanks so much, this was giving me the biggest headache ever! *Bows down*

    I've got the photos so you can go ahead and delete them from your server. Thanks again.

  26. No problem, jt4.

    Would a staff member please delete the URL to the sample page in me post above? Thanks.

Topic Closed

This topic has been closed to new replies.

About this Topic