Hide Page Title but keep Background Image

Hi Support,

You have previously helped me resolve this issue but a new problem came up, when I use the code that you shared with me:

/* Hide page title text but keep the background image */
.wd-page-title .container {
display: none !important;
}

/* Set banner height */
.wd-page-title {
min-height: 300px;
}

It does remove text from titles of Category pages and Normal pages, but when I upload am image for background, it distorts it. If I somehow adjust it for desktop, it then distorts for mobile. Kindly guide. I have attached link

Hello,

Sorry to hear about the inconvenience. Kindly, please share your Site WP-ADMIN Login details in the Private Content field so that we can check this concern on your Site and help you out accordingly.

Best Regards

I cannot share access as it is a client’s website, and he hasn’t shared access with me. I only login through his Hostinger account.

Hello,

Please remove the previous code and try to add the following custom css code in Theme Settings > Custom CSS:

.wd-page-title .container {
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0;
    padding: 0;
}

.wd-page-title {
    min-height: 300px; /* Your desired desktop height */
    background-size: cover !important; /* Forces the image to cover the area without distorting */
    background-position: center center !important; /* Keeps the center of the image focused */
    background-repeat: no-repeat !important;
}

Best Regards

Will this code work for Mobile version as well?

Hello,

Yes, try to add this code and check how it works. If you still face any issues, feel free to contact us.

Best Regards

Sir, I have used the code. I think it works fine now. It would have been better if we could upload separate pictures for desktop and mobile version.

Also, this code has removed Page titles of normal webpages too like Shop and About and Contact.

Hello,

There is no built-in option in the Theme Settings to upload separate page title background images specifically for different devices on category/archive pages.

To prevent this code from affecting your normal pages (like Shop, About, and Contact), please remove the previous code and use the following in Theme Settings > Custom CSS > Global CSS. It will hide the page title only on categories pages, not the shop, about, etc.

/* Hide page title text ONLY on Product Category pages */
.tax-product_cat .wd-page-title .container {
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0;
    padding: 0;
}

/* Apply background styling and custom desktop height ONLY on Product Category pages */
.tax-product_cat .wd-page-title {
    min-height: 300px; /* Your desired desktop height */
    background-size: cover !important; 
    background-position: center center !important; 
    background-repeat: no-repeat !important;
}

Best Regards

Please check my website. It is working good on Desktop but it makes every picture blurry on Mobile. I have increased dimensions and resolution of picture but on phone it is creating problem.

/*Hide Page Title & Fix Picture size*/
.wd-page-title .container {
visibility: hidden !important;
opacity: 0 !important;
height: 0;
padding: 0;
}

.wd-page-title {
min-height: 400px; /* Your desired desktop height */
background-size: cover !important; /* Forces the image to cover the area without distorting */
background-position: center center !important; /* Keeps the center of the image focused */
background-repeat: no-repeat !important;
}

@media (max-width: 768px) {
.wd-page-title {
height: 150px !important;
min-height: 150px !important;
}

With this added code for Mobile screen size, it still doesn’t look good.

Hello,

Could you please share a screenshot for a better understanding of where the image is showing blurry on mobile?

Also, share your site WP-ADMIN Login details in the Private Content field so that we can check this concern on your Site and help you out accordingly.

Best Regards

Please find attached screenshots. I cannot provide login details as client only gave me access through his Hostinger account. It is blurry on on both, Desktop and Mobile. I have attached original picture as well

Attachments:

You must be logged in to view attached files.

Hello,

I have checked your site on mobile, and the page title images are not blurry.

See Screenshot for clarification: https://postimg.cc/RWQx2t6K

Best Regards

Please check my category pages now. They all are blurry.

I found a solution of making Custom Layout for each Child Product Category separately. That can ensure Page title banner’s quality. But upon setting Layout Condition to Include >> Child Product Categories >> Smartwatches, it reverts back to old layout instead of shifting to new layout. I am looking to make new layouts for each category, that way I can have good quality banners on top.

Can you help me why this is happening?

I have created a test user for you just now. Please login and check.

Hello,

Sorry to say, the login link details you provided are not working. Please share the correct login details so I can check the issue and give you a possible solution.

Best Regards

The issue is resolved. I made New Layouts for each category using Layout Builder. It helped with image quality.

Sounds Great! that your issue has been solved.

I’m so happy to hear you are pleased with the Theme and Support. XTEMOS strives to deliver the best customer experience, and it makes our day to hear we have accomplished that.

We count ourselves lucky to have you as a customer. You can always reach us at any time. We are always here to help you.

Thanks for contacting us.
Have a great day.

Topic Closed.
Best Regards.

[Author]

Posts