WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Header image repeating itself (12 posts)

  1. traysee100
    Member
    Posted 11 months ago #

    When I try to edit my CSS, there is no code in there for me to set it to NO REPEAT. Can anyone help?

  2. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 11 months ago #

    Don't edit the files.
    Make your changes through a Custom CSS plugin.

  3. traysee100
    Member
    Posted 11 months ago #

    Thank you for your response. I tried the Custom CSS and typed:

    <body>
    background-repeat:no-repeat
    </body>

    and then saved the changes and it reverts back to nothing and doesn't make the change. What am I doing wrong?

  4. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 11 months ago #

    See the CSS examples on this article
    http://www.w3schools.com/css/css_howto.asp

    Regarding the syntax of CSS.

  5. Media X
    Member
    Posted 11 months ago #

    traysee,URL please.
    Basically,you want to stop the header image (not the background) to repeat itself.

  6. traysee100
    Member
    Posted 11 months ago #

    MEDIA X:

    URL is: http://the-byrds-nest.net

    Right, I know that I need to stop the header image from repeating, but I cannot figure out "how"... Thank you for your input.

  7. Media X
    Member
    Posted 11 months ago #

    style.css @ line 390

    `
    #header {
    background-image: url(images/header-bg.jpg);
    background-repeat: no-repeat;
    border-bottom: 1px solid #dfdfdf;
    }

  8. traysee100
    Member
    Posted 11 months ago #

    Thank you Media X, I truly appreciate your help. Now, my image has changed, however, it is still repeating and the image is now too big and my title is lost. From WordPress, I just edited my widget Custom CSS with this code. I didn't enter it in line 390 because I did not know how to do that. Is it time I paid someone for assistance with my blog?

  9. paulwpxp
    Font hero
    Posted 11 months ago #

    In your Custom CSS plugin, just put this

    #header {background-repeat: no-repeat;}

    Copy and paste as is, don't worry about the line number, he was just trying to tell where the code is to override.

    Also, from a design point, if you could blur out both edges of your header bg image to be that solid blue and use that as background color (header area), it would look great.

  10. traysee100
    Member
    Posted 11 months ago #

    Thanks Paul for the help! Here is the code that I entered:

    #header {background-repeat: no-repeat; margin: 0 auto 0 auto; width: 1264px; height: 270px; }

    This was so that I could get the image to center, however, even though my image is the size listed above, I have this weird top border and right-side border. I don't know how those things got there! Do you know how I would go about removing those?

    I'm also trying to figure out how to blur as you have suggested because I like that idea!

  11. paulwpxp
    Font hero
    Posted 11 months ago #

    This'd take care of the bg alignment, use this instead of the previous.

    #header {
    	background-position: 50% 0;
    	background-repeat: no-repeat;
    }

    This'd get rid of the top most bar ( not sure if this is what you refered to as top border ).

    #header .top-bg {
    	display: none;
    }

    It's actually a design element to match site's footer. I would keep it like that, it helps bring out the logo and white backgroud, but it's up to you.

  12. traysee100
    Member
    Posted 11 months ago #

    Thank you Paul!

Reply

You must log in to post.

About this Topic