When I use a linear-gradient on an image it shows a bunch of lines that are going across the screen as it fades to the bottom.
gradient clipping lines picture
I've tried looking this up and saw that the height shouldn't be 100% but when I changed it to what the person said it didn't change anything.
-webkit-mask-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(11, 11, 11, 0)));
mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(11, 11, 11,0));
This is the gradient I'm using
Hope I have this right in what you want. You can add a gradient background by adding a background-image:
background-image:linear-gradient (#520c52d9,
#00000050);
background-repeat: no-repeat;
background-size: contain;
// Or it could be
background-size: cover;
// OR
background-size: 100%;
There is much more you can do with this and I don't mind helping. Just let me know I do this a good amount. You can even put this on the text by making the Text Transparent (a bit of a jimmy rig like)
Related
So here's my code:
background: url(images/my-image.png) no-repeat center center / cover;
This works fine on Chrome and Firefox but not on Safari for some reason?
I used to declare my background-size on it's own line but as I understand it it should be possible to declare all properties in one line using a forward slash?
Any help would be much appreciated. Thanks.
As one line short hand code seems do unknown for safari browsers meaning of cover:
background: url(images/my-image.png) no-repeat center center / cover;
I faced the same issue before. And the following worked for all browsers:
background: url(images/my-image.png) no-repeat;
background-position: center;
background-size: cover;/*now this is known for the safari*/
background property has following attributes.
url("image path")
bg-color e.g transparent or any color
bg-img-repeat e.g repeat or no=repeat
bg-image-postion vertical and horizontal e.g center center
bg-img-size e.g cover, contain, 100%, 800px, or 200px 100px (width and height) etc
We will write like this
background: url("images/my-image.png") transparent no-repeat bottom center / cover;
background-size: cover; /*for safari we can add this sperately*/
I would like to make a text box that has 3 backgrounds, the top, bottom and a general background image that repeats according to how much text there is.
So far I have this: http://jsfiddle.net/6pTje/29/
The background that needs to be repeated doesn't repeat because of the code. But when I take out the no-repeat and put it directly after the images, it doesn't seem to work.
#exampleA {
width: 660px;
height: 400px;
padding: 25px;
background-image: url(http://i.imgur.com/vt6xUmh.gif) left top no-repeat, url(http://i.imgur.com/Qn8iy0u.gif) left bottom no-repeat, url(http://i.imgur.com/8P2nGUp.gif) left top repeat-y;
}
Can anyone take a look and see what I'm doing wrong? Or if what I'm trying to achieve is even possible? For the record I'd like it to scale so the more text there is the longer the box will get!
Thank you for any help!
is this what you are trying to do?
http://jsfiddle.net/6pTje/34/
background-repeat: no-repeat, no-repeat, repeat-y;
http://jsfiddle.net/6pTje/37/
background-position: left top, left bottom, 23px top;
I want to have multiple backgrounds at the same time, they will overlap each other.
I know it has to work but somehow it doesn't work for me.
code I have:
body{
height:100%;
width:100%;
background:
url("../images/background/top-img-bg.jpg") no-repeat center top,
url("../images/background/bottom-img-bg.jpg") no-repeat center bottom,
url("../images/background/overlay-pattern.png") repeat-x left top;
}
I want to have an image stick to the top, an image stick to the bottom and a image that overlay the whole background.
http://jsfiddle.net/8LtEk/
Try breaking your css into separate statements like below. Using comma's to separate the individual background images and maintaining the same ordering for any other background properties:
background-image: url("../images/background/top-img-bg.jpg"), url("../images/background/bottom-img-bg.jpg"), url("../images/background/overlay-pattern.png");
background-position: center top, center bottom, left top;
background-repeat: no-repeat, no-repeat, repeat-x;
Also, this is one of those CSS3 features where browser support could be the culprit.
I'm having a problem setting up div's background in 3 parts (I have a big shadow in 3 parts - top, mid (repeatable) and bottom). Unfortunately, they're a bit opaque so I can't have mid appear all the way from top to bottom... How can I set up background so the mid portion only appears between top and bot?
Current code that gives the problem:
background-image: url('shadow_top.png'), url('shadow_bot.png'), url('shadow_mid.png');
background-repeat: no-repeat, no-repeat, repeat-y;
background-position: center top, center bottom, center top;
I have DIV which has 2 backgrounds, in my case, it is gradient and image. I want to change the size of the background image, but not the size of the gradient ? Is it possible ?
Please note: I don't want to use 2 DIVs, one for gradient and one for background image
EDIT:
<div id="button"></div>
#button { background: url(img.png) no-repeat 0.5em 0.5em, -webkit-gradient(linear, left top, left bottom, from(#74ae0f), to(#497105)); }
Ok, by just simple coincidence I have found answer to my question. I couldn't find it anywhere on the internet, so I just tried this and it worked as I wanted:
background-size: 2em 2em, 100% 100%;
The first declaration "2em 2em" applies to background image and the second declaration "100% 100%" applies to background gradient. Therefore using the same order as both backgrounds were declared in background definition.
Now it seems simple and straightforward, but I didn't find it in any documentation or webpage.
i think you can just add
-o-background-size: 80%, 30%;
-webkit-background-size: 80%, 30%;
-moz-background-size: 80%, 30%;
background-size: 80%, 30%;