Archived topic
Decorating H2 with SVG or gradient
1 reply · Started by Alexander on November 16, 2021
Hi! I would like to decorate all H2 on the page with a line or svg background.
1. Could you please help me to correct the code so that the gradient doesn't spread to the width of the page but keeps the width of H2 or a little bit more:
.h2 {background: linear-gradient(180deg,transparent 0,transparent 55%,#f5f5f1 0,#f5f5f1);
background-color: rgba(0, 0, 0, 0);
background-position-x: 0%;
background-position-y: 0%;
background-repeat: repeat;
background-attachment: scroll;
background-image: linear-gradient(transparent 0px, transparent 55%, rgb(245, 245, 241) 0px, rgb(245, 245, 241));
background-size: auto;
background-origin: padding-box;
background-clip: border-box;}
2. I really like the svg shapes from your Shop theme home page (product titles). Is it possible to apply it as a background image for H2 site-wide via CSS without managing every headline block on every page?
Hi there,
#1 not as easy as the H1 customization, as that had some containment to work with.
Problem, to keep the background limited to the text you have to set the H2 display to inline. Problem with inline is you cannot center its content. So you need to:
1. Add a Container Block, set its Text Alignment to Center.
2. Add the H2 headline inside the Container, and in its Spacing settings check Inline Width
Then your CSS will work.
#2 the Shop site uses the H2 inside a container method as above. You could use CSS to add the background image to the H2 but you still have to deal with the inline/centred issue.
Unfortunately there are some limitations with CSS that requires the additional HTML in order to create these kinds of styles.
