WordPress.org

Forums

[resolved] Header image repeating itself (12 posts)

  1. traysee100
    Member
    Posted 2 years 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
    Forum moderator
    Posted 2 years ago #

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

  3. traysee100
    Member
    Posted 2 years 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
    Forum moderator
    Posted 2 years 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 2 years ago #

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

  6. traysee100
    Member
    Posted 2 years 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 2 years 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 2 years 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 2 years 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 2 years 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 2 years 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 2 years ago #

    Thank you Paul!

Topic Closed

This topic has been closed to new replies.

About this Topic