Image overlapping on footer

Support
#1

I have an image on the bottom of my header positioned to the right of the site.
The image is showing when you scroll all the way down to the footer.
I didn’t mean for this to happen but I like this effect, however I need to understand whats going on here.
I see a line like a border of some sort breaking the image from the elements of the page. I am trying to understand that as well.

Please assist so I can code this correctly.

#2

Hey,

Are you talking about the computer image? - This: http://prntscr.com/gt960t - if yes, this image has a position fixed - if you added it, remove this position.

#3

Yes, I tried removing that line and I also tried the background-attachment: scroll|fixed|local|initial|inherit; values however they all didn’t workout. Each of them made it repeat all over the footer. I like the fixed value with the image how it is if It was to look normal otherwise not show outside of the header at all. Perhaps my code is not correct elsewhere?

.x-bar-container {
background-image: url(“https://thatsmytech.com/wp-content/uploads/2017/09/Gainesville-Computer-Repair.png”);
background-color: rgba(0,0,0,0.2); /* change the 0.5 value into a value between 1 for full opacity and 0 for transparent if you like */
background-repeat: no-repeat;
background-position: right bottom;
margin-right: auto;
padding-bottom: auto;
background-attachment: fixed;}

#4

Hey,

To avoid any conflict, update your theme and the Cornerstone to the current version. To do that, go to Dashboard > Updates.

#5 
http://prntscr.com/gu58gf

Can you help me out with solving this puzzle?
It’s showing in random places just trying to identify the reason and the fix.

Thanks.

#6

Hello There,

Thanks for sending out the screenshot. This issue happened because you have inserted a custom css for the header which affects the footer also. You have this:

.x-bar-container {
    background-image: url(https://thatsmytech.com/wp-content/uploads/2017/09/Gainesville-Computer-Repair.png);
    background-color: rgba(0,0,0,0.2);
    background-repeat: no-repeat;
    background-position: right bottom;
    margin-right: auto;
    margin-left: 0px;
    padding-left: 0px;
    padding-bottom: auto;
    background-attachment: fixed;
}

You will need to update it and make use of this code instead which would target that this will only be applied to the header.

.x-masthead .x-bar-container {
    background-image: url(https://thatsmytech.com/wp-content/uploads/2017/09/Gainesville-Computer-Repair.png);
    background-color: rgba(0,0,0,0.2);
    background-repeat: no-repeat;
    background-position: right bottom;
    margin-right: auto;
    margin-left: 0px;
    padding-left: 0px;
    padding-bottom: auto;
    background-attachment: fixed;
}

If you need anything else we can help you with, please let us know.