[lucapizzonia]

Hi,
is it possible set an image background in the rectangle where appear “Category: xxxx”? I have four different post categories and I would show an image (or a different color) to identify single category.
Thanks

[Mahesh]

@lucapizzonia: Please post in your site url.

Regards,
Mahesh

[lucapizzonia]

For Example, these are two post categories:
http://www.lucapizzonia.com/category/blog/videogiochiamo/
http://www.lucapizzonia.com/category/blog/psy/

[Mahesh]

@lucapizzonia: You can do this with Custom CSS. Go to Dashboard=> Appearance=> Customize=> Additional CSS box and add the following CSS:

.category-172 .page-header .page-title {
	background-color: #00ff00;
}
  
.category-170 .page-header .page-title {
	background-color: #ff00ff;
}

Note: I used background-color instead of images.

Regards,
Mahesh

[lucapizzonia]

Can I use:
background: url(pathofimagefile);
to insert an image as an alternative to color?
Is synthax correct?

[Mahesh]

@lucapizzonia: Please use the following:

.category-170 .page-header .page-title {
    background-image: url("pathofimagefile");
}

Regards,
Mahesh

[lucapizzonia]

Thanks you Mahesh,
your code shows image. But there’s a little problem (last I hope): on my notebook image is complete, on other pc (with lcd 17″ 4:3) image is cutted, as same on smartphone.
Is there a css command to make image auto resizing?

[Mahesh]

@lucapizzonia: Please replace the above CSS with the following:

.category-172 .page-header .page-title {
    background-image: url("http://www.lucapizzonia.com/wordpress/wp-content/uploads/2017/01/Space-Invaders.png");
    background-position: center top;
    background-size: cover;
}

Regards,
Mahesh

[Author]

Posts