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]

This reply has been set as private.

[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

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[sharmstr]

This reply has been set as private.

[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

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[ghodson]

This reply has been set as private.

[sharmstr]

This reply has been set as private.

[ghodson]

This reply has been set as private.

[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

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[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

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[ghodson]

This reply has been set as private.

[sharmstr]

This reply has been set as private.

[Author]

Posts