I have a background image that is set to 100% width, depending on the screen size. This means, the height of the background image could be 100px or 800px.
I have a gradient to make the background image slowly transform into a grey color. But because the height of the background varies, I cant figure out how to get the gradient to begin where it is needed.
Setting a % makes it relevant to the page so doesn't work. I figure, I need to use the calc() function somehow. This is what i have, any ideas?
background: linear-gradient(to bottom, transparent, #ddd calc(??)),
#ddd url('../img/bg.jpg') no-repeat;
Related
so im trying to make a gradient like this one but with other colors:
So, im kinda new to css and i don't know how to make this glow effect bellow the gradient, thanks!
A background image can consist of more than one image - the first image in the list overriding those that come afterwards.
Using gradient images this snippet puts a transparent to a sort of dark gray from top to bottom image over a left to right gradient of colors.
Obviously this is just a start which will require you to play around with the parameters and the colors to get the effect you want.
div {
height: 10vh;
background-image: linear-gradient(transparent 0, #404040 40%), linear-gradient(to right, cyan, magenta, yellow);
background-size: 100% 100%;
background-repeat: no-repeat no-repeat;
}
<div></div>
I am sorry if it is dumb question, but this code is driving me crazy, i strip it down, was thinking i will be able to understand, but after doing that and investing 2-4 hours now i am confused about the things which i thought i knew.
This below code adding this cool effect when i over, it seems like background is appear from the bottom and goes to the top,
Only think i knew it has to some thing with background image, linear gradient, background size, and background-position
Please have look and try to take me out of my misery.
HTML CODE
<ul><li>Home</li> </ul>
css code
li {
background-image:
linear-gradient(to bottom,
transparent 50%,
#a2d39c 50%, #a2d39c 95%, #7cc576 95%);
background-size: 100% 200%;
transition: all .25s ease;
}
li:hover {
background-position: bottom center;}
li a {display: block;
padding: 1rem 0;}
If any body want to have link here is link as well.
https://codepen.io/arif_suhail_123/pen/jLPYOB
I've annotated your styles below to hopefully explain what is happening.
li {
// You're creating a background gradient, where the first 50% is transparent, the next 45% is #a2d39c and the last 5% is #7cc576
background-image:
linear-gradient(to bottom,
transparent 50%,
#a2d39c 50%, #a2d39c 95%, #7cc576 95%);
// The background size is twice the height of your element. Therefore with the 50% transparency and initial position, you're not going to see anything
background-size: 100% 200%;
// This will nicely transition between CSS property values when they change
transition: all .25s ease;
}
li:hover {
// When you hover over your list item, you're changing the position so that the bottom of the background is visible. This causes the 50% transparent portion of the background to disappear, and the coloured portion to slide into view
background-position: bottom center;}
}
Background Position
If you check out the CSS specs for background-position, you'll see that the default value is 0% 0%, which is basically top left.
Your CSS code does not specify an initial background position and so it will default to top left. Keep this in mind.
Your background gradient is defined to bottom, so from top -> bottom. The first 50% is transparent (invisible). The second 50% is comprised of two different colours.
Then consider that your background gradient is twice the height of your element. This is specified by the background-size: 100% 200% (100% width, 200% height). The background can be larger than the element to which it is applied, and any overflow will be hidden.
So initially when you're showing only the top half of your background gradient, what are you going to see? Only the transparent portion.
When you then override the background-position on hover, you're saying to now show the bottom center portion. Seeing as how your background matches the full width of your element, the center horizontal value doesn't change anything. But the bottom vertical setting does. It now means that the second 50% is displayed.
Does that help?
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 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;
}
Could someone explain to me what this portion of code means?
repeat scroll 0 0 #F6F6F6;
I have googled a lot and only found syntax to this part
-moz-linear-gradient(center top , #FFFFFF, #EFEFEF)
My code:
background: -moz-linear-gradient(center top , #FFFFFF, #EFEFEF) repeat scroll 0 0 #F6F6F6;
Thanks!
These are actually part of the background CSS property, not -moz-linear-gradient. Have a look at that link, it should explain.
Basically:
repeat: The background repeats!
scroll: When the page scrolls, the background scrolls too
0 0: Says, "start the background from this point in the image".
All the extra stuff is probably unneccessary - they seem to be the same as the defaults.
background: <image> <repetition> [scroll] <pos-x> <pos-y> <color>;
image can be both an image url() or in some browsers, a gradient object.
repetition can be no-repeat, repeat-x, repeat-y or repeat (both) and means how to repeat the image if it doesn't fill the background.
if scroll is set, the background will stay fixed on the screen and not follow the text when you scroll.
pos-x and pos-y determines the offset of the background.
color means the color that used if the image value was invalid.
Those are additional options to the background: css shorthand.
The repeat repeats the image (although, -moz-linear-gradient doesn't support repeating).
scroll (as opposed to fixed) allows the background to "scroll"
0 0 are x and y coords for the placement of the top left corner of the image.
#F6F6F6 is a background color