Can't seem to figure out two things…

Hi patsagar. Welcome to the Hueman forum.

1. When you added top padding the the #header .pad element that pushed your header pad element (and the remainder of the site) down but it didn’t change the position of the header image. Then you added negative background-position values to the header which is what pulled your image up and left. If you remove the #header background-position property your image should revert to it’s normal position.

2. Your border code on the static message works. You just can’t see it because it blends into the background. Try changing the color to red; then you’ll be able to see where it is.

An additional note: in your child theme CSS you don’t need the @import line. The parent theme enqueues both the parent and child CSS files automatically.

Thanks for the reply bdbrown.

I’m not at my computer at the moment so I can’t do anything at the moment. BUT, before I left home I figured out 2. ??, I just have to put in the code I used while inspecting page and place it into the editor. Thanks for the telling me.

Yeah for 1. I’m just gonna have to remove the padding and heighten the image. But is there anyway to make the grey blocks black? I miss-worded the question in my original post. Nothing is wrong with the image, just the grey blocks on the sides.

The grey blocks are there because the header, and thus the image, has been moved up and left by the negative background-position values. If you don’t want to remove those then you can add the background-color property and set it to black:

#header {
position: relative;
padding-bottom: 60px;
background-image: url("../hueman/assets/front/img/Website_Header_BG.jpg");
background-repeat: no-repeat;
background-position: -80px -60px;
background-color: #000;
}

Hmmm, interesting. Thanks again, I appreciate your help! Can’t test the code at the moment but definitely will when I get the chance.

Is there a way to get the same background position without putting background-position to negative values?

I had the negative values since the beginning of my theme editing journey. Never thought too much of it until you told me. Didn’t know that was what was causing the grey color below the image! Good to know now.

Awesome it worked! I got both just the way I liked, thanks bdbrown!

But now there is another problem :(. The span comment and pinterest save icons on the

.post-thumbnail img

are above the thumbnail. To make the border just the way I like I had to decrease

.special {
padding-bottom: 30px; TO
padding-bottom: 7px;
}

Then write the code

.post-thumbnail img {
padding-top: 30px;
}

which lowered the image but kept the icons where they were.

Is there a way to lower these two without messing up anything else xD OR, even better, is there a way to raise the border without increasing the padding of

.post-thumbnail img

while also keeping a distance between the static post and thumbnail?

Basically is there a way to just raise the height of

.special {
border-bottom: 5px solid #000
}

without messing with anything else?

Move the border to the top of the featured container:
1. remove the padding on the .post-thumbnail img
2. remove the padding and border on .special
3. modify the .featured CSS:

.featured {
    border-bottom: 5px solid #FFD300;
    border-top: 3px solid #3914af;
    margin-top: 7px;
    padding-top: 30px;
}

Exactly what I was looking for, thanks for everything bdbrown!

I never thought of it like that! Now I know what to do in the future.

This thread is finally resolved!