Docs

[kateanita]

Hello, I have a semi-transparent image at the bottom of my header which is not displaying in Firefox.

I tried what was suggested in this post: https://community.theme.co/forums/topic/content-under-transparent-navbar-not-working-in-firefox/

header.masthead {
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

but it didn’t solve the issue.

Thanks,

Katie

[Rahul]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[kateanita]

Oops sorry! URL is http://dev.stapkodesign.com/ Thanks!

[Friech]

Hi Katie,

Are you referring to this image?

It is visible on my end. What version of Firefox you’re in? And try to clear your browser’s cache.

Thanks.

[kateanita]

No it’s the small golden floret and line underneath the logo and menu still in the header (forms a border between the header and the main content) – screenshot attached of how it looks in Chrome.

Thanks.

[Christopher]

Hi there,

Please update your CSS code to :

.x-navbar {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent !important;
    background-image: url("http://dev.stapkodesign.com/wp-content/uploads/2016/07/floret-header3.svg");
    background-origin: padding-box;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-bottom: medium none;
    margin-bottom: -25px;
    padding-bottom: 30px;
}

Hope it helps.

[kateanita]

Thanks but that didn’t work – the image is viewable in firefox now but the size of the floret image is now too large since the background-size property no longer seems to be working. Is there any way to resize the image now like I had it before? Thanks for your help…

[Christopher]

Hi there,

You can use one of following background-size values:

background-size: cover;
background-size: contain;
background-size: 100% 100%;

You can also resize background image.

Hope it helps.

[Author]

Posts