SOLVED How to repeat an image in a Gantry 5 particle?
-
-
- Pinto Buck
- Rocketeer
- Posts: 74
- Thanks: 11
-
I'm using Joomla 3.51, Gantry 5, and building a template off of Hydrogen.
I need to repeat an image vertically to create a border.
I've tried using the logo/image particle, deleting the gantry-logo class, text, and image.
If I put in my own image url, the image shows up, but I have been unable to make it repeat.
I tried creating a class, which did not work:
.repeat-template-inner-left-border-image
{
background-repeat: repeat-y;
background-image: url("/images/TemplateName/shadow-left-inner-border.png");
background-position: top right,initial;
}
I tried a class, which did not work
.repeat-vertically
{
background-repeat: repeat-y;
}
I tried using the Custom HTML particle, with:
<img src="/images/TemplateName/shadow-left-inner-border.png" style="repeat-y; "/>
The image shows up, but it did not repeat.
I tried the Custom HTML particle with just
<img src="/images/TemplateName/shadow-left-inner-border.png" />
and applied the classes shown above. The image showed up but it would not repeat.
To summarize, what combination of code and class should I use in which particle to get a repeating image?
Thank you for suggestions/comments. - Last Edit: 7 years 10 months ago by Pinto Buck.
-
-
-
- Pinto Buck
- Rocketeer
- Posts: 74
- Thanks: 11
-
Ok, I got the image to repeat by using the logo/image particle. I cleared out the default text, image, and class. Then I put a new css class in the block CSS Classes field. It only works in the block CSS Classes field. It did not work in the Particle CSS Classes field. And, it did not work for me in the block Tag Attributes field even though I created a #Tag in the custom.scss file.
To make it work, I put code in the custom.scss file which repeats the image in a vertical column:
.template-repeat-shadow-left-inner-border-vertically
{
background-image: url("images/TheTemplatesName/shadow-left-inner-border.png");
background-repeat: repeat-y;
}
In the block CSS Classes field, I put class name:
template-repeat-shadow-left-inner-border-vertically
For new people like me, notice that the leading period before the class name was included in the custom.scss file, but the leading period was omitted when I typed the class name into the Gantry block. Also, you can make the class name
.anthing-you-want-to-call-it
If you want the image to repeat horizontally, just use repeat-x instead of repeat-y.
My remaining problem is that I cannot get the image to align right. The block's built in variations seem to have no effect. - Last Edit: 7 years 10 months ago by Pinto Buck.
-
-
-
- Pinto Buck
- Rocketeer
- Posts: 74
- Thanks: 11
-
I want the repeating image to align right, but it insists on aligning left. As I said, the block variation Align Right has no effect. So I tried using no block variations, but putting the alignment command in the custom.scss file in the class I created.
This is what worked for me:
.template-repeat-shadow-left-inner-border-vertically
{
background-image: url("images/TheTemplatesName/shadow-left-inner-border.png");
background-repeat: repeat-y;
background-position: right;
width: 20px;
margin: 0;
padding: 0;
}
The width is the width of your image.
If the repeating image creates too much vertical space, you may need to add a height to the css class to match the height you need.
.template-repeat-shadow-left-inner-border-vertically
{
background-image: url("images/TheTemplatesName/shadow-left-inner-border.png");
background-repeat: repeat-y;
background-position: right;
width: 20px;
height: 56px;
margin: 0;
padding: 0;
}
You may need to recompile your css to get the results to show on screen. The Recompile CSS button is at the top of Gantry 5's Styles page. - Last Edit: 7 years 10 months ago by Pinto Buck.
-
Time to create page: 0.036 seconds