-
Posts
-
Hello,
I am trying to create a top and bottom border for a colored section that uses a small image and repeats it but having not much luck. I have been able to create a top and bottom border but not able to with a repeat image. I’ve uploaded the image to the media library and I can’t get it to show so there is no border.
For Developers: Section ID I put: spidercss
In general CSS I put:
#spidercss {
border: 30px solid
border-left: none!important;
border-right: none!important;
}
#spidercss:before {
content: ” “;
display: block;
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 12px;
background: linear-gradient(#dfe6ec 0%, transparent 0%), linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 linear-gradient(45deg, #272220 33.33%, #dfe6ec 33.33%) 0 0%;
background: -webkit-linear-gradient(#dfe6ec 0%, transparent 0%), –
webkit-linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 -webkit-linear-gradient(45deg, #272220 33.33%, #dfe6ec 33.33%) 0 0%;
background: -o-linear-gradient(#dfe6ec 0%, transparent 0%), -o-linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 -o-linear-gradient(45deg, #272220 33.33%, #dfe6ec 33.33%) 0 0%;
background: -moz-linear-gradient(#dfe6ec 0%, transparent 0%), -moz-linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 -moz-linear-gradient(45deg, #272220 33.33%, #dfe6ec 33.33%) 0 0%;
background-repeat: repeat-x;
background-size: 0px 100%, 9px 27px, 9px 27px;
}#spidercss:after {
content: ” “;
display: block;
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 12px;
background: linear-gradient(#dfe6ec 0%, transparent 0%), linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 linear-gradient(45deg, #272220 33.33%, #dfe6ec 33.33%) 0 0%;
background: -webkit-linear-gradient(#dfe6ec 0%, transparent 0%), –
webkit-linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 -webkit-linear-gradient(45deg, #272220 33.33%, #dfe6ec 33.33%) 0 0%;
background: -o-linear-gradient(#dfe6ec 0%, transparent 0%), -o-linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 -o-linear-gradient(45deg, #272220 33.33%, #dfe6ec 33.33%) 0 0%;
background: -moz-linear-gradient(#dfe6ec 0%, transparent 0%), -moz-linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 -moz-linear-gradient(45deg, #272220 33.33%, #dfe6ec 33.33%) 0 0%;
background-repeat: repeat-x;
background-size: 0px 100%, 27px 9px, 27px 9px;
}Hello Rikard,
Thank you for responding. I have updated the original post with the private information you requested. I have also updated the css code to show css triangles. If you scroll down the page you will see the different triangles around the colored section being repeated. I am wanting to use a png image instead of triangles to repeat making a border but when I do it nothing shows.
Something like below I get no result.
#borderimg {
border-image-source: url(border.png);
border-image-repeat: repeat;
}Hi,
Please try adding a custom CSS class name to your color section and use the ID selector to target specific sections and add your custom styles.
Best regards,
VinayThanks. I was able to fix it. I used border-image instead of background-image in my css and the same with repeat. So in the top css below you get a repeat png image of your choosing as a border for the colored section. The below was just some gradient CSS stuff to make sure it still displayed but you could use the same background repeat in the top for the bottom just replacing all the gradient css stuff. Thanks again.
.spidercss:before {
content: ” “;
display: block;
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 79px;
background-image:
url(//wp-content/uploads/2019/09/spider.png);
background-repeat: repeat-x;}
.spidercss:after {
content: ” “;
display: block;
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 12px;
background: linear-gradient(#dfe6ec 0%, transparent 0%), linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 linear-gradient(45deg, #272220 33.33%, #dfe6ec 33.33%) 0 0%;
background: -webkit-linear-gradient(#dfe6ec 0%, transparent 0%), –
webkit-linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 -webkit-linear-gradient(45deg, #272220 33.33%, #dfe6ec 33.33%) 0 0%;
background: -o-linear-gradient(#dfe6ec 0%, transparent 0%), -o-linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 -o-linear-gradient(45deg, #272220 33.33%, #dfe6ec 33.33%) 0 0%;
background: -moz-linear-gradient(#dfe6ec 0%, transparent 0%), -moz-linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 -moz-linear-gradient(45deg, #272220 33.33%, #dfe6ec 33.33%) 0 0%;
background-repeat: repeat-x;
background-size: 0px 100%, 27px 9px, 27px 9px;
}Hi,
Great, I’m glad that you got it working and thanks for sharing your code. Please let us know if you should need any further help on the topic or if we can close it.
Best regards,
RikardHello Rikard,
For some reason it is not working anymore. I don’t understand it. I want a repeat image for a border of the colored section. I had it working where the spider web was showing and repeated and now I think I messed it up. I have done what you said and made some edits like I mentioned and it showed up perfect and now it’s just gone. I have given login credentials and details so maybe you can see what is wrong.
.spidercss:before {
content: ” “;
display: block;
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 79px;
background-image:
url(https://mywebsiteenfold.com/wp-content/uploads/2019/09/spider.png);
background-repeat: repeat-x;
}.spidercss:after {
content: ” “;
display: block;
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 12px;
background: linear-gradient(#dfe6ec 0%, transparent 0%), linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 linear-gradient(45deg, #272220 33.33%, #dfe6ec 33.33%) 0 0%;
background: -webkit-linear-gradient(#dfe6ec 0%, transparent 0%), –
webkit-linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 -webkit-linear-gradient(45deg, #272220 33.33%, #dfe6ec 33.33%) 0 0%;
background: -o-linear-gradient(#dfe6ec 0%, transparent 0%), -o-linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 -o-linear-gradient(45deg, #272220 33.33%, #dfe6ec 33.33%) 0 0%;
background: -moz-linear-gradient(#dfe6ec 0%, transparent 0%), -moz-linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 -moz-linear-gradient(45deg, #272220 33.33%, #dfe6ec 33.33%) 0 0%;
background-repeat: repeat-x;
background-size: 0px 100%, 27px 9px, 27px 9px;
}Hello,
I still can’t get it to even show like it did before. Can somebody please help. I am trying to get a image to show and repeat at the border area of a colored section. It was working before and now it is not.
In the colored section Custom CSS class I put spidercss
I put this code in general styling CSS section
.spidercss:before {
content: ” “;
display: block;
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 179px;
background-image:
url(https://mywebsite.com/wp-content/uploads/2019/09/spider.png);
background-repeat: repeat-x;
}Hi,
Thank you for the update.
Is this fixed? This is what we see on our end.
Screenshot: https://imgur.com/a/fWnTywA
If you want to move the heading downwards so that it’s not covered by the spiders, add a whitespace/separator element above it.
Best regards,
IsmaelHello,
I ended up using 3 colored sections to get it to do what I want. The middle being the main content and the top and bottom using a background image. Then tiling horizontally with repeat option. This is just a practice run for what I want to create. Thank you.
- The topic ‘Border image repeat for colored section’ is closed to new replies.