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
Related
What I tried:
#page-text {
background-image:
url(./images/paper-top.png),
url(./images/paper-bottom.png),
url(./images/paper-mid-2.png);
background-repeat: no-repeat, no-repeat, repeat-y;
background-position: 0 0, 0 100%, top 10px;
background-size: 100% auto;
}
Unfortunately the repeating part repeats all over #page-text and since paper-top is partly transparent, paper-mid-2 is visible in those transparent parts. For illustration notice the top corners of the paper (or see the live version)
You are probably better off dividing #page-text into three vertical sections. A nice way to do that without extra HTML is to use :before and :after on #page-text, holding the top and bottom background images and placed above and below #page-text respectively. That way, you can let the middle background image repeat as much as needed without interfering with the top and bottom background images. You also then don't need CSS3, thus providing a more backward-compatible solution.
I have a gradient image as the background to my website and I am having problems making it look correct with all page sizes. The image is 291x1080 and I am having it do a repeat-x. This is fine with all pages that are no larger than 1080p. However, for a page with more content or a screen with a resolution larger than 1080p, a white space follows the background. I do not want to do a simple repeat-y because the gradient going from light to dark without a transition would be strange. Is there any way to flip the background image every time it does a repeat-y using CSS?
This is the css to do this:
body {
...
background: #eeeeee url("/static/img/background.png") 0 0 repeat-x;
...
}
My suggestion: have the fabric texture and a gradient, not in an image.
For example:
body{
background-image: url("/static/img/background.png") repeat, linear-gradient(top, #000000, #123456);
}
You should make sure you add the browser support tags (-webkit, etc)
For further reference check out this:
How do I combine a background-image and CSS3 gradient on the same element?
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;
}
How can I create a programmatic horizontal gradient that starts at a prescribed location (in pixles on the x-axis)?
Here's the issue- I've got an image set as background-image - ideally, what I'd like to do is declare a CSS gradient that starts close to the edge of the image (~1800 pixels) and fades gracefully to full black.
So far, the best solution I have is to have two div elements- one with the photo background and the other with a 1px tall gradient image repeated along the y-axis with a background-position that starts at 1780px.
This works, but I really want to get away from the 1px image trick. Any ideas?
<div id="photobg">
<div id="gradientbg">
</div>
</div>
#photobg {
background-image:url('photourl.jpg');
}
#gradientbg {
background-image:url('1pxgradient.jpg');
background-repeat: repeat-y;
background-position: 1780px 0;
height: 100%;
}
What I'd like to do, in theory, is use color stops at 1780 px for a CSS gradient but as I understand it, CSS only supports % values as color stops.
Reference:
CSS 3 Gradient n pixels from bottom - Webkit/Safari
No, you can use pixels with linear gradient:
background-image: linear-gradient(transparent 1780px, black 100%);
You can also combine this gradient with multiple background images on one div.
You might want to check out this jsbin, I've made for you:
http://jsbin.com/sonewa/1/edit
This block of css will do what you want
background: -moz-linear-gradient(center top , #00AFF0, #53D4FE); //this is for mozilla
background-image: -webkit-linear-gradient(top, #00AFF0, #53D4FE); //this is for chrome and safari
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00AFF0', endColorstr='#53D4FE', GradientType=0); //this is for IE
while the gradient is from color #00AFF0 to #53D4FE (top to bottom)
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