I'm using Tailwind 3, and I'm trying to get this effect:
background: url('img1.png') repeat 20%, url('img2.png') no-repeat;
I tried all kinds of things like this was getting close:
bg-[url("img1.png"),url("img2.png")] bg-[length:20%,auto] bg-repeat
but I'm not able to make the bg-repeat arbitraty to make it repeat the first one and not the second one.
Related
I made a grid background for one element using 2 linear gradients. The lines however don't have consistent thickness and appear blurry in some segments, very clear in others, etc. - see this screenshot:FF screenshot.
The actual CSS for the background looks as follows:
background-image: linear-gradient(to right, black 1px, transparent 0%),
linear-gradient(to bottom, black 1px, transparent 0%);
background-size: 22px 22px;
background-repeat: repeat;
A JS script automatically scales the element's width and height to multiples of 22px based on the available space.
I tried to modify the gradient a bit in terms of size and line width, and with those two being comparatively large everything seems to be fine. But that's not what I want. I also tried using an image I made in Paint3D, but it didn't change anything.
I turned to other browsers, and different engines seem to render it in a different manner, but the problem still persists in one way or another (the above screenshot is FF). It appears as though this is an issue with the rendering itself, and needless to say I have no idea what I could do.
I thank in advance for any suggestions on how to fix this problem.
I need to blend two background images with multiply blend mode, but the first image should not be repeated and the second image should be repeated, because it is a pattern.
How can I do it using SASS (CSS)?
background: url('img1.jpg'),url('img2.jpg');
background-repeat: no-repeat, repeat;
background-blend-mode: multiply;
This is how most background-image-related properties work, including background-size and background-position; when multiple images are specified (comma-separated url list, as shown), you can list properties for each image. The orders will match up, meaning in our example, img1.jpg will not repeat, and img2.jpg will.
Actually my first question on stack:)
I'm trying to get a negative (right) margin on my repeating background, so there won't be a gap between the repeating images.
It seems there is no css syntax for this.
To make things clear, i added an image below. So i'm trying to get the repeating images of the cookie-like things to overlap so there's no gap between them.
screenshot of the page
You can apply multiple backgrounds to an element, so why not use this background image twice, with different horizontal offsets.
body {
min-height:170px;
background:
url('http://i.stack.imgur.com/jKAKB.png') 0 100% repeat-x,
url('http://i.stack.imgur.com/jKAKB.png') 75px 100% repeat-x;
}
PS the cookie like things are called kruidnoten. Although everybody calls then pepernoten, which is not actually true.
I would like to have two background images for a fansite layout I made: one background should be repeated both horizontally and vertically, the other one only vertically and needs to have a specific position. I made some search on StackOverflow and I added the following to my CSS:
body {background: url(images/bg.png) 162px repeat-y, url(images/bg-all.png) top repeat;}
Clearly I'm doing something wrong though, because the only image showing up it's the second one, the bg-all.png file. I'd need the bg.png to be over bg-all.png because it's the content background.
In order to make things clear, even though it's far from being finished (in fact, there are several other issues but I think it's better to solve one problem at a time), I'm adding a link to the test version of the layout: http://gwyneth-paltrow.org/test/
I don't know if it matters, but it's a Wordpress site.
I'm definitively not an expert and every suggestion is very much appreciated.
Thank you all in advance!
the second value of the background position is missing, try this and substitute the ??? with a value:
body {
background-image: url(images/bg.png), url(images/bg-all.png);
background-position: 162px ???, top ???;
background-repeat:repeat-y, repeat;
}
also note that the first declared background image is ON TOP of the second one.
http://jsfiddle.net/gB7js/
I have a website with a repeated background image.
background: url(images/back_small.png) repeat center center fixed;
I would like it more, however, if the image were not repeated one copy after an other, to add some variation.
The final result should be a sort of a dotted pattern where the image appears now and then, instead of being instantly repeated.
I have no idea if this is possible with CSS, but if so... I'm waiting for idea :D
I recommend using a variation of the multiple background technique where you save your image with differing sizes of transparent "space" around it based off prime numbers.
It is known as the Cicada Principle on this site.
The prime numbers introduce the "randomness." Of course, if you do not want them to overlap in any way, then you will need to be very selective exactly what image sizes to use to insure no direct overlap occurs within a normal size monitor display.
My solution is to use the same image twice (we can put as many background images we want).
Then use different repeat-x and background positions to dictate the final look of the background. My solution is as follows:
background-color: white;
background-image: url(../../../../../assets/images/my-watermark.png),
url(../../../../../assets/images/my-watermark.png);
background-repeat: repeat-x, repeat-x;
background-position-y: -60px, 400px;
background-position-x: -150px, -270px;
There's not really a way to do exactly what you're asking in pure CSS. I have however seen people introduce "noise" into a site's background using multiple images.
Here's an example of using multiple backgrounds with CSS.
Here's a stackoverflow question regarding noise in gradients.
Hopefully this gives you some ideas to get a feel for what you want on your site.