Page title area responsive image

[ghodson]

I have placed a background image in the title area of my blog archive page.
I want to make this iamge responsive. The issue is that it is using padding to adjust size of container.

[ghodson]

See http://lssbei.com/blog/

[sharmstr]

Seems like something like this would serve you better

.main-title {
content: url(“http://yoursite.com/wp-content/uploads/2014/02/xxxx-blog2.jpg”);
height: auto;
width: 100%;
padding-top: 0;
padding-bottom: 0;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[sharmstr]

Private reply so I can give you the full css with your site name 🙂

COPY CODE

.main-title {
    content: url("http://lssbei.com/wp-content/uploads/2014/02/lssbei-blog2.jpg");
    height: auto;
    width: 100%;
    padding-top: 0;
    padding-bottom: 0;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[ghodson]

Thanks the only problem with this is that the container has no height if padding is removed. I.e you can only see a thin strip about 40px. I want to show around 300px in height and have it resize to about 150px on mobile if you get what I mean.

[sharmstr]

The code works fine on my site. Did you remove background image from theme options first? http://dev.sharmstr.com/testing-again/

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[ghodson]

Yes. Take a look at my site. when using your code, I can’t see the image.
Login Details in case you need:

username: tangible
Password: Solution4$3$2$1$

[sharmstr]

But I see it just fine. And it scales.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[ghodson]

Hi There

After recent update, I can no longer see this image again. (although it seems to be just firefox that is having the issue). Can you please check for me.

Thanks

[sharmstr]

Technically, the content element needs to be attached to a ::before or ::after pseudo element. Chrome apparently doesnt care, but firefox does. Add css for the ::before pseudo element

.main-title::before

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[ghodson]

I’ve just noticed that this fix won’t work because it places the image on other pages, when it should only be on the blog archive page.

[sharmstr]

put .blog in front of it.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[ghodson]

I tried, but now I just get grey area, no image.
This is what I have:

body.blog h1.page-title { display:none; }
body.blog .page-info { visibility:hidden; }

.blog.main-title::before{
content: url(“http://lssbei.com/wp-content/uploads/2015/08/LSSBEI-Blog.jpg”) !important;
height: auto !important;
width: 100% !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}

[sharmstr]

You need a space between .blog and .main-title since they are different divs 🙂

COPY CODE

.blog .main-title .container {
    display: none;
}
.blog .main-title {
    height: auto !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: 0;
}
.blog .main-title::before {
    content: url("http://lssbei.com/wp-content/uploads/2014/02/lssbei-blog2.jpg") !important;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Author]

Posts