I have an PNG image with a transparent area. It is a bit like a torn of checkout receipt with a zig-zag edge. It will sit at the bottom of a div with a white background to simulate a till receipt. I have tried this as follows.
background: #ffffff url("../images/zigzag.png") bottom right no-repeat;
But the background white fills right to the edge of the image
Aside from creating another div is there a way to stop the background colour going under the image?
Adding another div is probably the cleanest solution.
However, if the height of your div is limited, you can instead make the background of the div transparent and extend the top of the "ragged-edge" image with white pixels until it's tall enough that it always provides a white background to the main part of the div.
make background-color transparent:
#foo {
background: transparent url(yourzig-zagImage) no-repeat 0 0;
}
Related
I am using background-repeat:repeat-x; to repeat a background image horizontally, but I noticed that there is a white space after the earlier image and before the next image.
How can I get rid of this white-space?
Here is the page where this is happening: https://dl.dropboxusercontent.com/u/270523/help/search/new.html
One may have to make the browser window wider to see the landscape background image repeat.
A little transparency on each side is in the image file. Crop the image.
Using the Chome Developer Tool, you can see that your SVG file is one pixel larger than the PNG version. The SVG is also layered higher and (because of the size difference) is scaling differently than the PNG. Try cropping the image or switching the order of the layers -
From
background: url(dawn.png) top left repeat-x;
background: url(dawn.svg) top left repeat-x;
To:
background: url(dawn.svg) top left repeat-x;
background: url(dawn.png) top left repeat-x;
In the inferno design (SMF 2.0), the red background of the main_body div shows up half on the left and half on the right, how is this done? http://demo.dzinerstudio.com/
You just need a background image on the body element that is aligned top and tiled horizontally.
body {
background: url(/myimage.png) center top repeat-x
}
then just need the image to be the right height for the look your going for...
It's just because the div.wrapper is on top of the div.main_body. To get the half effect on the main_body div, they just have a background color and a gradient image tiled on the x axis.
Is that not you question?
I have a background gradient on a div (only code for FF shown below for readability)
background-image: -moz-linear-gradient(bottom, rgb(238,238,238) 0%, rgb(255,255,255) 100%);
I then have an image inside this that needs to "break out" the bottom over a second div below that has the same gradient. I am using z-index 2 on the image, z-index 1 on the div.
This works fine when the divs have no gradient (just a solid background colour), but as soon as I apply the gradient the z-index fails and the image drops behind the second div, see images below:
With gradient background
With solid background
The issue was the z-index on the containing div, even though it was set lower than the image, removing it fixed the problem :/
I'm going to guess that the elements with the z-indexes don't have a position property. Then z-index won't work. It may seem to work with no gradient, but that is because the background-color of the div is transparent an the image is visible underneath it, giving the impression of being on top.
Am I right?
Is it possible to change the color or tint of background image on hover/focus using pure css
See example here http://jsfiddle.net/jitendravyas/HdDRA/
In above example there is a white arrow on an image. I want to change the color of white arrow ( not the other background image) to something else on hover and focus.
I cannot use inline images in my case.
Edit:
I'm looking almost same like this http://jsbin.com/icemiy but for background images.
And I also want to change the color with fade-out so I can't do with multiple images
A quick and dirty fix would be to duplicate the arrow image in the color you want it to be onHover. Then replace the background image with this in the code.
body
{
background:
url(http://www.kapellohair.com/images/white-arrow.png) no-repeat,
url(http://www.tnpsc.com/downloads/NaturesScenery.jpg) no-repeat;
background-position:
center 50px,
center top;
}
body:hover
{
background:
url(http://www.example.com/images/arrow-with-desired-color.png) no-repeat,
url(http://www.tnpsc.com/downloads/NaturesScenery.jpg) no-repeat;
background-position:
center 50px,
center top;
}
p.s: The link does not exist. It is only for illustration purposes
Just thinking off the top of my head here.
I suppose you could put a transparent coloured div over the top of the image with an opacity of 0, then have its opacity go up to say 10% on hover. You'd be somewhat limited on what you could do though, it would look weird if you did it to an image with an irregular outline, for example, and you'd only have limited control over the tinting (I think it would pretty much be the equivalent of a semi-opaque layer in Photoshop so you couldn't do anything that you would require other tricks such as multiply or screen to achieve).
No, you can't do what you want, you can change the background using another different image.
An alternative could be to use a font to render the arrow and then to change its color (which is also animatable).
Alternatively, you can rely on Javascript to do some color manipulations on the image. See this answer
I am looking at the navigation bar on Linkedin.
http://www.linkedin.com/
#nav-primary {
background:url("http://static02.linkedin.com/scds/common/u/img/sprite/sprite_global_v3.png") no-repeat scroll 0 -320px transparent;
}
#nav-primary .wrapper {
background:url("http://static02.linkedin.com/scds/common/u/img/sprite/sprite_global_v3.png") no-repeat scroll 0 -510px transparent;
height:39px;
padding:0 5px;
}
The background of #nav-primary controls the top part which I understand.
However, the background of #nav-primary .wrapper controls the bottom part, I really lost here.
If you look the background image sprite_global_v3.png carefully, at line 510, there is no color there, just transparent color, how this can make the shading bottom border displayed.
Based on my understanding, in CSS the background image starts from top-left corner with 0 0 and x grows from left to right. while y decreases from top to bottom.
Any idea?
Thank you
Based on my understanding, in CSS the background image starts from top-left corner with 0 0 and x grows from left to right. while y decreases from top to bottom.
Correct, however, what you think is happening is actually happening.
The .gif and .png files both support something called transparency, which is basically what you would think: you 'see through' the image to see the color that would be behind it.
PNG goes even farther in that you can have things partially transparent, which creates a neat effect. GIFs can only be totally transparent or opaque.
Some browsers don't like to cooperate nicely with transparent pngs though, but we don't care about that.
:D