I've got question about CSS.
I've got 2 divs, one with background-color: #000; and second with transparent png file partly without background (so transparent), let's call it background-image: url(images/scrolltotop.png);.
What I want, is to override background-color with transparency from png file, so the background doesn't cover my png file. I'll give images to show you what i mean:
and now image with the result I want to get (above) - with background from html style.
Is there any way to cover background-color with transparency?
edit: maybe this img will tell you more, what I want to do (above)
background-color: transparent;
Have you tried that?
EDIT
http://jsfiddle.net/FCXGu/3/
border-width: 20px;
border-image: url("//i.imgur.com/hg2Thfa.png") 20 stretch;
-moz-border-image: url("//i.imgur.com/hg2Thfa.png") 20 stretch;
-webkit-border-image: url("//i.imgur.com/hg2Thfa.png") 20 stretch;
It takes a moment to understand how this can work. The border of the image essentially acts like the "padding" as it is generally thicker than normal. You could thought just have the top of the border thick for your cutout in which case your code might look like:
border-image: url("//i.imgur.com/hg2Thfa.png") 20 0 0 0 stretch;
This would mean the top border of your div, would use the top 20 pixels of the image you are using, and the rest of the image would just be used in the content area of your div. Either way, the effect you want can be achieved with border-image.
Is it the best way/only way? Probably not, but it is one way.
Here is the fiddle: http://jsfiddle.net/FCXGu/3/
I added a content area just to illustrate where everything is in this one: http://jsfiddle.net/FCXGu/4/
Without seeing your exact image, page, and usage I couldn't tell you the best way to create a png, use stretch vs repeat, etc. But border-image is pretty flexible. However it is does not work in ALL browsers. Just the good ones.
Related
I'm trying to make a grid background out of dots. I can't just use an image, because I need everything to be configurable:
background color
dot color
dot size
space between dots
Unless there's a better solution, I think the only way I can achieve this is with pure CSS. I've done some looking around and so far the closest thing i've found is using a radial-gradient. I'm having trouble though; I haven't been able to find a solution that lets me configure both the dot size and the space between dots while keeping a circle shape. I've gotten close, but than my dots end up looking like diamonds instead of circles. Here's what i've come up with so far:
https://jsfiddle.net/yzpuydtn/
body {
background-image: radial-gradient(black 2px, white 2px);
background-size:40px 40px;
}
Does anyone have any suggestions? Initially i'd like to have my dots be 2px x 2px and 40 px apart. Is there a better way to do this, or am I just configuring my gradient incorrectly? I think i'm close, but depending on how I zoom they look like either circles, diamonds or squares and I need it to always look like circles.
Using %: https://jsfiddle.net/yzpuydtn/11/
Using vw: http://jsfiddle.net/otwhu0uk/2/
Here is an example. I really hope this helps you.
body {
/* Controls size of dot */
background-image: radial-gradient(black 5%, white 0%);
/* Controls Spacing, First value will scale width, second, height between dots */
background-size:5% 10%;
}
im trying to figure something out.
i have a simple webpage with a pattern background that is repeated, what i want to do in css is create a color overlay using multiple backgrounds. my code is this.
html,body {
background:
rgba(200, 54, 54, 0.5),
url(../img/background.png) repeat;
}
however it makes nothing show, just a white screen, if i switch the background positions and put the image on top then i can see it does find the image and displays that but obviously with no color overlay.
did i miss something in how i think this should be working? does it not work on the html,body tags?
any help is greatly appreciated.
Thanks
Nick
rgba() is a color value. You can only have a color value in the last background layer; specifying a color on any other layers makes the syntax invalid.1
If you need to overlay the background image with a semitransparent color, the only workaround for one element is to create an image of that color and overlay that instead. But since you're trying to apply a page background, you should be able to simply apply the color overlay to body and the image to html:
html {
height: 100%;
background: url(../img/background.png) repeat;
}
body {
min-height: 100%;
background: rgba(200, 54, 54, 0.5);
}
Just keep in mind that body needs to cover the entire area of html as well, otherwise your color will only overlay part of the background image. The height and min-height styles above enforce this for height; for width, you will need to make sure body does not have any side margins or a width that's less than 100%.
See this answer for a more extensive write-up on both approaches to html and body backgrounds.
1 It's understandably puzzling why colors are forbidden from any layer except the bottom one considering that color values with alpha channels exist and that you can still work around it with an image with the same alpha channels and the browser would still have to composite the background anyway. But that's just how it is, I guess. It doesn't look like this limitation is going to be addressed in Backgrounds level 4 either, so what do I know.
I want to hide two images (partially) behind my center/main div ,just like it is shown on the picture i included [the images are blue and the center div is brown,the darker blue color is the part of the image that is supposed to be hiden behind the div].The two images are included in the HTML (as tags).They have to be (as they currently are) part of the HTML and not "injected" via CSS.
The positining of the images isn't a problem,but the "overlaping/hiding" is.I have tried so many times via z-index but to no avail.
Can anyone help ?
link to picture. http://i.stack.imgur.com/ZCKdt.jpg
If you're looking to partially hide them behind the main div, you can either set the parent container (your body tag, if nothing else contains the main div) and add your images in css using background-image: url(image1.png), url(image2.png); and then background-position: left center, right center;. You can also use pixels or percentage to determine the positioning of the horizontal and vertical, respectively. That way, you don't have to bother with the z-index.
However, neither this, nor z-index will solve your other problem of having the images partially visible. For this, you can set the colour and opacity of your main div's background with background: rgba(0, 0, 0, 0);, where the first three zeros can be any number from 0 to 255 which represents red, green, and blue, and the fourth zero represents any number from 0 to 1 (as decimals) which determines opacity. The lower the number, the more transparent the background is. The more transparent it is, the more you can see the images behind it.
Alternatively, you can use opacity: 0; in the same way as above
Without seeing your HTML/CSS, it's going to be harder to diagnose the problem, but it sounds like you're confusing body elements with positioned elements. Z-index won't work for body elements, so you should try to place the blue images into a div and pull that div behind your brown div.
You can find more info and a jsfiddle example at this older post: Hiding a image under the div
In trying to finalize the layout for my blog, I am having one issue I cant seem to get past. I have two different backgrounds that I want to use for my blog. One of the backgrounds is used just for the header of the blog. The other background I want to add is for the rest. I have been trying to find a way to get my body background to repeat after so much spacing with little luck.
If there is a way to have a background repeat-y after a certain position that would be perfect. But that doesn't seem possible from my searches. If there is another way to accomplish this, it would be very helpful.
This is the site I am trying to edit.
As you can see, the header has the proper background, but I cant figure a way to get that background everywhere else. For clarification, the background header has a blue background under the home/search buttons, so that is why I cant just have one repeating header.
I just made a few edits to my site, and I got to to look very close to how I want. I did more of a quick fix that is "good enough". I just made the header background repeat, and it looks pretty good for the most part. The only problem with it now is that the blue bar that is part of the header sometimes shows up at the bottom of the screen, which is okay I guess. If anyone has a better solution I would love to hear it.
When you specify "repeat-y" then there is no posibility as far as I know to make the background begin repeating after some coordinate.
However, since you have 2 different backgrounds, you don't need to.
Just specify the non repeating background first, and with the adequate dimensions; it will hide the other
This CSS
.test1 {
background-image: linear-gradient(90deg, black, red), linear-gradient(0deg, white, yellow);
background-position: 0px 0px, 0px 0px;
background-size: 100% 100px, 100% 50px;
background-repeat: no-repeat, repeat-y;
}
produces a black & red top, followed by a repeating pattern of yellow stripes
demo
It is not clear from your example if this is enough; if not you would need another background, between the first and the second, to hide the amount of the repeating background needed
I have a div with background image which contains 3 colors of the same icon
I shift the icon (background-position: top/center/bottom) according to what page is user viewing:
All works fine utill I zoom the page (ctrl + mousewheel) - than the background image seems to shift one pixel up or something, so i can see one-pixel line of the other icon at the bottom of my wrapper div:
Screens are from IE but it looks even more broken on iPad...
Any thoughts about what is causing this and how to fix it?
You can prevent any of the other images inside the sprite from showing by using diagonal sprites, or simply leaving some space between each image.
I shift the icon (background-position: top/center/bottom)
Use should use explicit px offsets instead. I suspect that will be slightly more robust when it comes to zooming.
There's nothing you can really do to prevent things sometimes being "1px off" when you zoom.
For example, if you have a 42px high element, and you zoom to 125%, then you have a 52.5px high element. The browser must round that number one way or the other.
Since those images are bitmaps, they always gonna look bad wen you zoom them.
You can do tree things:
Use a library like raphael JS and inlude your icons as vectors: http://raphaeljs.com/
Wrap your icons into spans for example and using a PX size and not EM's.
Leave more speace between your sprites
Try to make better resolution image and try it again.
It's better practice (and ultimately gives you much better control) to use pixel positioning rather than top/center/bottom when implementing CSS sprites, that way the image you want to show can be slightly larger (or with a little spacing) and therefore support that visual overflow you're seeing when you zoom. Your other images/states won't be affected by the neighbouring image/state because you're setting their position with a pixel-specific location rather than top/center/bottom e.g. (from article link below)
#panel-a {
background: transparent url(sprite.jpg) 0 -200px no-repeat;
}
#panel-b {
background: transparent url(sprite.jpg) -96px -200px no-repeat;
}
#panel-c {
background: transparent url(sprite.jpg) -172px -200px no-repeat;
}
#panel-d {
background: transparent url(sprite.jpg) -283px -200px no-repeat;
}
Not to mention that pixel positioning allows you to add additional states to your image without affecting other existing states if you add them onto the bottom of your image, for example. Of course that changes when you start adding images horizontally.
Here's a good reference: http://www.alistapart.com/articles/sprites