Hi all,
Forgive my ignorance, but…. How do you do this? I’d like to put it on my home page, that style…)
Thanks
Hi,
That is a design specific to the craft demo. A background image is set for block titles and other elements. You could see these related topics
– https://forum.tagdiv.com/topic/excerpt-not-shown-on-blog-page-change-background-of-headers/
– https://forum.tagdiv.com/topic/how-to-change-read-more-button-under-the-excerpt/
You could set a background image of your choosing as background for the block titles, but only with custom code. That is how the craft demo does it as well, in the demo stylesheet.
Thanks
I am very interested in applying this to my page, I will read the links you have provided.
Thank you 🙂
@Simion C.
Thanks, that’s just what I need.
However, I am very clumsy about this.
I don’t use the “craft ideas” demo, my theme is standard https://goo.gl/UFaj1n
Which file should I edit to add the line?
background-image: url(“https://my-web.com/wp-content/uploads/2018/03/example.png”);
Thanks
That would depend on where exactly you want to display that image, for what elements. The demo uses block header template 6 for the blocks
– https://demo.tagdiv.com/newspaper/block-header-6/
Then the background image is applied and some additional customization. You can use the browser inspector to create the necessary custom code
– https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/
I will try to help you, mention for which elements you want to make this customization.
Thanks
Thank you. Thank you,
I would like to use this background image and the same style as “craft” in the titles of the home blocks (and sidebar blocks as well).
Maybe it’s easier to choose that demo, install and then optimize it to my liking?
Thanks
You could install the demo and then simply replace the image used by it with your own. Or you could set the image without installing the demo.
Because you are using multiple block header styles this will require a code for each block template used, a general one will not work. For example the crafts demo uses block header template 6 and a general code for all the title backgrounds, it is easier that way.
Block header template 6 was used because it would be easier to customize it like this. You can use a code like this to set a background image of your choosing for it
– https://www.screencast.com/t/hb383i2M
This is the code, use the image you wish in it then enter it in Theme panel->Custom CSS
.td_block_template_6 .td-block-title {
text-align: center;
background: url("https://demo.tagdiv.com/newspaper_craft_ideas/wp-content/uploads/2017/03/header-bg.png");
background-repeat: no-repeat;
background-size: auto 100%;
background-position: center center;
}
.td_block_template_6 .td-block-title:before {
display: none;
}
Thanks a lot 🙂
Hi Simion
This didn’t work for me with the header style 10, I changed the .td_block_template_6 into .td_block_template_10 trying to make it work.
So the code looked like this:
.td_block_template_10 .td-block-title {
text-align: center;
background: url(http://blog.loopearplugs.com/wp-content/uploads/2018/04/stephen-frank-492607-unsplash.jpg);
background-repeat: no-repeat;
background-size: auto 100%;
background-position: center center;
}
.td_block_template_10 .td-block-title:before {
display: none;
}
Can you help me? The uploaded backgrounds keep getting blurry.
Hello Loopearplugs,
To make it easier, you should install that Demo and investigate there how this effect was made, sorry! The above solution which my colleagues have been provided should work and also if you are not aware of the steps which you need follow in this case, please consider hiring freelancer/developer to help you because we cannot provide custom work at the moment, sorry!
Thanks for the message!
Hi Catalin
I’m trying to change the header on the homepage into a picture. But it keeps getting blurry, I already figured out that the code I copied here wasn’t the one to fix this issue.
Can you direct me towards the code for a header background picture that doesn’t get blurry/pixelated?
Thanks in advance!
Pieter
Hello Loopearplugs,
Make sure that you have correctly added the image to your header background from the theme panel. Please provide your website URL and some useful screens to show me the problem.
Thanks for your understanding!
