WordPress.org

Ready to get started?Download WordPress

Forums

Typo-o-graphy
Header picture has black around it.. (8 posts)

  1. Stimpdawg
    Member
    Posted 1 year ago #

    I have my header picture up and it is 960 pixels by 390 like the theme suggests. But, when I load it up in Chrome.. it shows black lines around the image so that it's not full screen on the top. My site is http://evenmore.davethemonkey.net/ Any way to fix this? Thanks.

    Jen

  2. NikoV
    Member
    Posted 1 year ago #

    Hey there,

    If you have a custom css option or a plugin you can use these css codes and it should fix the problem.

    #header h1, #header h2 {
    font-size: 48px;
    margin: 5px 10px 0;
    padding: 38px 0 123px 0;
    background: url(images/header-btm.png) no-repeat center bottom;
    text-align: center;
    line-height: 0.9;
    text-shadow: 0 1px 1px #000;
    }
    #header-desc {
    color: #ddd;
    padding: 0 10px 35px;
    margin: 0 auto 0;
    display: block;
    max-width: 600px;
    text-align: center;
    background: transparent url(images/header-desc.png) no-repeat bottom center;
    letter-spacing: 1px;
    text-shadow: 0 1px 1px #000;
    }

    Hope it helps! :)

  3. Stimpdawg
    Member
    Posted 1 year ago #

    I know how to edit code a bit. But not sure where to put this code? Hope you can help out more Niko. Thanks!

  4. Stimpdawg
    Member
    Posted 1 year ago #

    Niko - I found it under Stylesheet (style.css) and changed it with what you said. But, it doesn't work. :(

  5. NikoV
    Member
    Posted 1 year ago #

    Hey there Stimpdawg

    You will need a custom css plugin or a child theme to achieve this safely so that future updates won't ruin the changes.

    When using child theme or a plugin those css codes will overwrite the parent and they should work. I guess the problem is that the code isn't really overwriting the code.

    You can actually do this also if that won't work:

    #header h1, #header h2 {
    font-size: 48px;
    margin: 5px 10px 0;
    padding: 38px 0 123px 0;
    background: url(images/header-btm.png) no-repeat center bottom;
    text-align: center;
    line-height: 0.9;
    -webkit-box-shadow: 0 0px 0px #000;
    text-shadow: 0 1px 1px #000;
    }
    #header-desc {
    color: #ddd;
    padding: 0 10px 35px;
    margin: 0 auto 0;
    display: block;
    max-width: 600px;
    text-align: center;
    background: transparent url(images/header-desc.png) no-repeat bottom center;
    letter-spacing: 1px;
    -webkit-box-shadow: 0 0px 0px #000;
    text-shadow: 0 1px 1px #000;
    }

    This is the line that is making that line on chrome :)
    Default: -webkit-box-shadow: 0 1px 1px #000;
    Modified: -webkit-box-shadow: 0 0px 0px #000;

  6. Stimpdawg
    Member
    Posted 1 year ago #

    Thanks for all your help Niko. I can't seem to get the picture full screen. I know it's the dimensions of it.. but the theme should work correctly. I think I'm going to skip using this WordPress theme and use one that functions right.

  7. NikoV
    Member
    Posted 1 year ago #

    Hey there Stimpdawg,

    Oh you just wanted the whole picture full screen. I thought you meant the wierd lines on just chrome. Just the upper image could work if you add like 1920 x 390 picture on there.

    Really sorry about the confusion.

    960px is the same width as the main area. 1920 width is abit over the regular area but it should scale down depending on visitors browser.

  8. karenleeo7
    Member
    Posted 9 months ago #

    Hey NikoV,
    Thank you, your answer completely worked for me to get rid of the black outline!! I am thrilled. Thanks!

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic