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.
Related
I've run into an issue when using background-position in a div along with background-size: cover. There seem to be some quirks in the browsers calculations, so I'm looking for a reliable way of doing this.
More detail...
The use case is mostly visual and everything in the interface should scale nicely. In the past I've has good results by either using rem or em units for everything.
At the start or when the screen size changes I'm measuring the available screen space and then set an appropriate font-size on the container. Something like this...
const size = calculateSize();
$("#container").css({fontSize: size + 'px'});
Generally, it works very nicely. Everything scales and positions itself properly - or does it?
I recently added a graphic button - a with a background image.
.button {
background-image: url("img/button.png");
background-size: cover;
width: 10em;
height: 4.5em;
cursor: pointer;
}
.button:hover {
background-position-x: -100%;
}
I did also try background-position-x: -10em, but I prefer the percentage notation as it takes care of itself if I resize the button image.
That's when I started noticing a small, but annoying problem. When I hover over the button, it moves just a little bit. The amount varies depending on how large the available space is. It's usually only a pixel or 2 at the most. It seems equally affected by Chrome, Firefox, and Edge.
It might not seem like much, and maybe I can just accept it as a feature, but I'm wondering if anyone else has experienced this and found a way around it.
One likely solution would be to just use separate images for the different button states, but I prefer keeping the number of images to a minimum.
UPDATE: So, I just tried creating 2 separate images, and then changed the CSS accordingly...
.button {
background-image: url("img/button0.png");
background-size: cover;
width: 10em;
height: 4.5em;
cursor: pointer;
}
.button:hover {
background-image: url("img/button1.png");
/* background-position-x: -100%; */
}
This does make the wobble movement go away, so I'm pretty confident it's some specific issue with how the browser is interpreting background-position-x. Being such a small movement, I suspect it's some sort of rounding error.
Minimal, Reproducible Example:
In an attempt to ensure I wasn't just seeing things, I put together a jsFiddle that illustrates the problem...
https://jsfiddle.net/xtempore/nfLh86sm/8/
I made a simplified version of the button image. It's just black on the left half and very pale grey on the right. Then I put it into 4 different divs each with a different font-size.
When you hover, you should just see the rectangle change from black to grey. And on the 1st and 3rd ones it does. But check out the 2nd and 4th ones! When you hover, there's a sneaky little bit of black appears on the left-hand edge.
The units used are pretty straightforward in this case. The problem seems to appear with odd-numbered pixels. In my case sometimes these font-sizes will also include decimals (e.g. 15.45px).
This problem demonstrates an issue with rendering in the common browsers (Chrome, Firefox, Edge), but I managed to find an alternate method that gives the desired result.
Instead of using...
background-size: cover;
... you can use a percentage, for example ...
background-size: 200%;
If your base image is 2 sprites wide, i.e. contains two images for different states side-by-side, then the specified background-size should be 200%. Similarly, if you have 3 times the size, 300%, and so on.
This gives the desired scaling, even as the div changes size.
You can see that the problem is resolved in the example fiddle by just changing that value from cover to 200%.
With problem: https://jsfiddle.net/xtempore/nfLh86sm/8/
No problem: https://jsfiddle.net/xtempore/2vcg4h1L/
I hope this helps someone else who is getting these weird side-effects.
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 can't believe I can't find this ANYWHERE, but I'm just wondering if anyone knew how to inversely repeat an image in blogger. For example, I'm using this CSS coding for a background image
body { background: url(http://3.bp.blogspot.com/-yqiPjoMManc/UprceV8zY7I/AAAAAAAADZw/GP119GZKgzM/s1600/new+background.png) repeat fixed top center; background-color: none; }
.body-fauxcolumn-outer div { background: none !important; }
anyway, it looks super weird on screens of bigger computers, as you can see here: http://prntscr.com/292k6l
as when you repeat the image, the sides don't match up at all. Does anyone know how to continously flip around an image in blogger when repeated? Thanks!
Try cut pattern separately from the gradient and put them on different layers. If you give PSD i can help you. Gradient will stretch across the width of the page, the picture is repeated over the gradient.
The question looks like, i am asking for a code, but that's not so. I googled plenty of times and landed in pages which did not told what i wanted. It may be my bad part to not find it in google.
I've seen it somewhere, probably on some site, that i don't recall
I have six png files, namely,
top_right.png,
top_left.png,
bottom_right.png,
bottom_left.png,
horizontal.png,
verical.png
What i want is to make is a box, with borders using the images above.
I think it has to do something with background position and percent, but i couldn't find how to do it?
Separate them using commas ex:
body {
background-image: url(bottom.png), url(top-right.png);
background-position: center bottom, right top;
background-repeat: no-repeat;
}
I have a web application whose performance I am working to enhance. In an attempt to do this, I decided to use css sprites. I have placed all of my images in a .png file called images.png.
CSS sprites have worked well for all css classes that just display an image once. However, several of my images need to be repeated. For instance, I have a banner.png image used for the banner background. Whenever I set the background-repeat property, it seems that the image does not repeat. To show my CSS definitions, here they are:
Before CSS Sprites
------------------
.ghwc {
background-image: url(/images/layout/banner.png);
background-repeat:repeat-x;
color:White;
width:300px;
}
After CSS Sprites
-----------------
.ghwc {
background-image: url(/images/images.png);
background-repeat:repeat-x;
color:White;
background-position:60px 319px;
width:300px;
}
My question is, how do I use CSS sprites for repeated images like backgrounds?
Thank you,
My question is, how do I use CSS sprites for repeated images like backgrounds?
You don't. That is simply not possible using CSS sprites. To do that, you would have to be able to specify an area of the image that is to be repeated, and to my knowledge that is impossible in both CSS 2 and 3.
You can do this if you're only background-repeat:repeat-x; as in the example, you just need to make all backgrounds contained within the sprite image container the same width and lay the sprite image file out vertically. Then your background position property will always have the first x position be 0 and the sprite is located with the second y position (e.g. background-position:0 0; background-position:0 -100px; background-position:0 -200px; etc) . This might not work across all browsers if you can't specify the exact height and set overflow:hidden.
Assuming your background image (images.png) shows at all, your code should work. If you want this to render correctly on Opera and Firefox, you'll need to add
background-attachment:fixed;
Edit: I just realized you're probably talking about a specific coordinate set in a "sprite" image comprised of several 'images'. You're not going to get any one particular area of an image to repeat like that. Crop the image to the size you're concerned about, then use the code you have.
If you want to use repeat-x, you must not put several images next to each other in your sprite as the whole sprite is duplicated in x-direction (as you already noticed). But you can put them in one vertical line. (The other way around if you want to use repeat-y. There is nothing like "background-crop" up to now (maybe in CSS4? ;) )