[Theme – Merlin]Remove header margins for full display of background image?

  • Resolved JWolfPDX

    (@jwolfpdx)


    9 years, 3 months ago

    Greetings,

    I have set this theme up for a site that I’m developing and would like to have the header(area above the menu, not the header image that gets displayed BELOW the menu via Themes->Customize->Header Image) be able to display an image that completely fills this area. As it is, my image has a white border around it that I want to get rid of. I have tried a few different suggestions that I’ve found for editing the css(in a child theme) but it is having no effect.

    Can someone offer a suggestion/solution for this?

    Thanks,

    -John

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter JWolfPDX

    (@jwolfpdx)

    Ok so I’ve gotten this to work for the most part by adding the following CSS to my child theme:

    .header-widget {
    margin-top: -18px;
    margin-right:-50px;
    margin-left:-36px;
    margin-bottom: -18px;
    }

    However I still have a border along the right side of the image regardless of the value that I set the margin-right to.

    Any suggestions on how to remedy this issue?

    Thread Starter JWolfPDX

    (@jwolfpdx)

    Ok, I have finally worked through this myself. I will post my solution here in case anyone runs into this.

    What I had to was set my background image height and width to the exact dimensions of my background image, simply setting them to 100% was not working.

    Here is the final css:

    .header-widget {
    background: black url(https://jwolf.noip.me:8088/wp-content/uploads/2015/11/EP-Comedy-Store-bg-large.jpg) no-repeat top left;
    float: left;
    margin-top: -18px;
    margin-right:-50px;
    margin-left:-36px;
    margin-bottom: -18px;
    width: 1190px;
    height: 476px;
    }

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘[Theme – Merlin]Remove header margins for full display of background image?’ is closed to new replies.