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?
Related
I have a background-image on my body, set to repeat so it covers the entire page like an infinite background, no matter the length of the page.
I'd like to have this fade out to show the default background (plain white) about half way down the window when first loading up a page, so it's more like a banner background.
I've found previous questions like this one: Fade image to transparent like a gradient detailing how to fade an img element which is located behind other content.
But I am specifically asking how to fade a background-image applied with CSS, not an img element. Is this possible?
Here's an example of the effect I desire (done by editing the image directly in image manipulation software): https://travamigos.com/about-us/
This is not possible with CSS as it stands as background images cannot be affected by opacity.
However, you could overlay the bg-image background with a background gradient with opacity but it would have to end in a definite color, in your case white.
body {
min-height: 100vh;
background-image: linear-gradient(transparent, white 75%), url(http://www.fillmurray.com/460/300);
}
So, here is JSFIDDLE.
Here, you see header with background color gradient:
background: linear-gradient(to right, #827099 0%, #dc5562 100%)
I also have span with :before css attribute that mimics the background color behind it.
The purpose of this is to get a "cut" feature as a part of the word "THIS". You will notice that a top left portion of "T" is missing or more like hidden behind the :before attribute.
The issue I am having is that since the background color is linear-gradient, when the screen width changes, so does the linear-gradient (you can see by making the browser window smaller)
This change in the gradient does not reflect on the :before attribute and it no longer matches the background color.
Is there a way to fix this while keeping the linear-gradient of the background?
Not sure if this is an option for your use case, but you could set the linear gradient to ensure that the color change doesn't happen until after it clears the cutout.
You would set the first stop in the gradient to be the width of the padding (118px) plus the width of the clip border (21px) and then change the clip border colors to be the same as the starting color of the gradient. In the example below I rounded up to 140px.
https://jsfiddle.net/6dvy7dks/
.head {
background: linear-gradient(to right, #827099 140px, #dc5562 100%);
}
span.first:before {
border-top-color: #827099;
border-left-color: #827099;
}
I am currently trying to fix some CSS. The specification I've got is that the background should be transparent, like this:
But as you can see, when I set the background to transparent the white texts looks very washed out, as compared with:
At the moment the text is set to fully white, fully opaque in the CSS:
.banner-content p {
color: rgba(255,255,255,1) !important;
}
Can anyone suggest any CSS tricks to increase the apparent contrast, given that the text is already as white and as opaque as possible...
When you set the opacity of a container like this:
#container {opacity:0.5;}
it affects the opacity of the container AND all of its children. So the font becomes 50% opaque too.
It seems like you really just want to give the container a translucent background, which you would do like this instead:
#container {background-color:rgba(0, 0, 0, 0.5);}
and that won't affect the text within that container.
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;
}
I have two columns that can stretch to variable heights, the designer wants to have a shadow between the two columns, but as you can see the image fades out at the top and the bottom. That means I can't just use a background image using css that is left aligned in the column on the right.
So then I though maybe I can use a css 3 border shadow that has a radial gradient. I am probably going to use table cells to do this because I need the shadow to stretch to the height of the tallest column. How do I do this?
Previous answers doesn't really answer your question: "How do I create a radial css3 border gradient shadow"
You can use a radial gradient to simulate a border shadow without images.
Demo: http://jsfiddle.net/sonic1980/wRuaZ/
background: -webkit-radial-gradient(50% 0%, 50% 5px, #aaa 0%, white 100%);
| | | |
| | | +--> color end
| | +--> color start
| +--> size of gradient ellipse (x-axis, y-axis)
+---> position of ellipse center
It's easy to modify to make it vertical or implement using :before or :after pseudo-classes.
Another example, an <hr> tag with shadow: http://jsfiddle.net/sonic1980/65Hfc/
i have a suggestion that you do not need use css3, you may use two different class, one is normal, and other has background. And when loading page finish, and call js method, settimeout to dely some seconds, toggle class.
I think I am just going to use the image, and set a min-height on the div :-)
.column.right {
padding-left: 30px;
background: url(/img/shadow.png) no-repeat left top;
min-height: 265px;
}
Another solution would actually allow for a dynamic height column, but it only has IE8+ support.
What you'd do is apply a background-image positioned to the edge of the tallest column. Then you could use the :before and :after pseudoelements, set to absolute positioning of top:0; and bottom:0 respectively, to set the 'cap' on the shadows.
Does that make sense? Here's a JSFiddle that shows it using a border and text, instead of images.
Of course, the height parameter of the div in the JSFiddle is of no consequence; it could be min-height or nonexistent. I just set it to give the div some size.