Upland OL User community

[solved] Is it possible to create a background pattern in css?

#1

Hello there!

I was just wondering is it possible to create a background pattern instead of solid colors in CSS?

Like the below:

image

Obviously Im going to use it to paint my custom bar graphs. On close up this is what it looks like

image

Now that I think about it, maybe I could make a repeating image of a pattern as a background instead?

Any advice is appreciated.
Thanks in advanced!

Regards,
E

#2

Unless you’re using a background image and repeat this background image (1) it is unfortunately not possible to apply a background pattern to, let’s say, a Positioned Box element.

Obviously Im going to use it to paint my custom bar graphs

Can you let us know please if you’re you creating you’re own Bar Chart element or the one which can be inserted by going to: PReS Connect Designer > Insert > Business Graphic > Insert Bar Chart? In case it’s the latest one I’ll have to inform you that it is unfortunately not possible to apply a background pattern to bar graphs (see ‘How to Apply CSS rules to Charts (link)’ for more information).

(1) Example:

HTML:

<div id="example"></div>

CSS:

#example {
    background-image: url('../Images/example.png');
    background-repeat: repeat;
    height: 200px;
    width: 200px;
}
#3

Hi Marten,

Im creating my own bar graph. As I only need 3 bars without any other elements like the X/Y grid or labels etc. And I find the built-in graph generator to be difficult to use and customize.

And what I noticed too when using the graph creator, is when you are in preview mode as you edit its component and when you hit apply, it doesnt update the view which I found frustrating. Anyways thats just my take on it.

Thank you for the link you sent me.
And I indeed just used a background image like you mentioned.

image

Cheers
E

#4

If you “draw” these bars as div boxes you can of course use css patterns as background.

e.g.

<div class="divBar"></div>

.divBar {
  background-color: white;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='black' fill-opacity='1' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: repeat;
  border: 1px solid black;
}
1 Like