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.
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'm create a list of avatar for my user to choose on my website. The avatars are in a big image with 5 sub-image per row and 5 sub-image per column. So this by using image background position, I can display one of the 25 possible choice. For example, my sub-image size is 160X160, and I want to display row 3 column 2. The css will be
<img class="avatar-icon img-thumbnail" style="background-position: -160px -320px; background-image: url('/images/logos/Avatar_0.png')">
It works great. Then I found the avatar is a little bit big in some situation. And I want to stretch the background after it is positioned. In the example above, I still want to display from area from (-160px,-320px) to (-320px,-480px). But I want to stretch it to 50%, so imag size will be 80x80. I tried the background parameters but didn't find a good combination. Is there a css way to do it? (without duplicating the big image to a 50% smaller one)
Use a <div> or <span> for background properties instead of applying on image tag.
You can achieve avatar scaling in 2 ways:
1) By scaling both position parameters and image size, i.e.
background-position: -80px -160px; background-size: 50% auto;.
2) If you don't want to change the position parameters, you can simply scale with the transform property.
transform: scale(0.5);
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.
I'm trying to understand someone's CSS >> HERE <<.
Basically, he has defined his background element with this syntax:
background: url( 'bars.gif' ) 0 -50px no-repeat;
My image is a different size than his, so I am trying to adjust my code to fit my image. However, the w3schools info on CSS Background shows that this format should be used:
background: #ffffff url('img_tree.png') no-repeat right top;
Where is the overload info for background located?
Good question.
Short answer: The order is irrelevant to the final product.
Background is shorthand for five different properties.
background-color (# followed by digits or a named color)
background-image (url('url goes here'))
background-repeat (repeat, repeat-x, ...)
background-attachment (fixed, scroll)
background-position (location, percent, or pixels)
Notice that each option contains a unique formatting. This allows the renderer to understand the declaration without relying on a specific order. Also, any parameters unspecified are set to the default.
W3schools suggests a format to reduce the cognitive load on developers (which obviously didn't work in this case). I would suggest that you stick with W3's suggestion to hopefully avoid this confusion in the future.
I'm specifying a color hex code as the background-color of a really long div. However, i'd like this color to be only repeated horizontally, from left to right, in the first part of the and not go down any further.
Can that be done using background-repeat:repeat-y or is there another method?
Colors have no height...they just exist, without dimensions. If you want a visual distinction between your background color and the rest of the document, you'll need to use a solid image as your background-image:
div.className {
background-image:url("images/background.jpg");
background-position:left top;
background-repeat:repeat-x; // Causes repeat from left-to-right only
}
Do you mean repeating background color or an image? I assume an image becaues repeating a background color makes no sense. And yes this is the correct way:
#mydiv {
background-image: url(images/background.png);
background-repeat: repeat-x;
}
The background-repeat CSS property defines how background images are repeated. A background image can be repeated along the horizontal axis, the vertical axis, both, or not repeated at all. When the repetition of the image tiles doesn't let them exactly cover the background, the way adjustments are done can be controlled by the author: by default, the last image is clipped, but the different tiles can instead be re-sized, or space can be inserted between the tiles.
http://www.handycss.com/how/how-to-repeat-a-background-image-horizontally-with-css/
You can achieve this without a file when creating an 1px image and put it into your CSS encoded as base64, or by using multiple html elements and positioning. You can not specify a background size for a plain color defined in pure CSS (without using the image trick) at this time.
Also see Is embedding background image data into CSS as Base64 good or bad practice?