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?
Related
I want to make a background like this except using an image instead of the blue background: http://gakeyclub.org/
Notice that resizing the window of the browser does not disturb the background. What do I need for this?
According to your comment, what you are asking is to have your background center on your page. To do so use background-position this will tell the browser where to position the background according to its container.
background-position:50% 50%;
You might like to add some other background attributes such as background-repeat:no-repeat to make sure the picture does not repeat on huge resolutions.
this is how your css should be looking for a fixed image as background:
body
{
background-image:url('image.png');
background-repeat:no-repeat;
background-attachment:fixed;
}
Why do you want to use an image. It will just increase the size of the page. Use this code:-
background: none repeat scroll 0 0 #002f5f;
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)
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
On Yahoo.com, I really like the light gray body gradient background. (Just the gray fade)
However, I can't find the image they use to great this effect.
Does anyone know what image/code Yahoo uses to create this background effect?
It's the image: http://l1.yimg.com/a/i/ww/met/th/slate/gsprite_pg_slate_20100521.png
If you look at the CSS you'll see:
background-image: url(http://l1.yimg.com/a/i/ww/met/th/slate/gsprite_pg_slate_20100521.png);
background-repeat: repeat-x;
Which is what everybody else is pointing out. However, the part that nobody else has pointed out is that there is also:
background-position: 0px -2335px;
Which defines an offset so that the background you see doesn't actually start till way down the image.
The gradient that is shows is white to grey, then transparent. In order to make the gradient in this manner you have to set the color of the page equal to the last extent of the gradient. So if you look in that CSS you'll also see:
background-color: #E8EDF0;
This completes the gradient you currently see on yahoo.com.
I have also confirmed that #E8EDF0 is the correct hex code for the last non-transparent color on that background image.
in your image app, make a gradient that starts very slightly darker then it ends
Have a look at the Style on the HTML element using something like FireBug or Chrome's Inspect Element or even IE's Developer stuff.
Also a good thing that a lot of beginners don't understand is that you create a gradient image that's for example 100px tall by only 10px wide. then you just use a css style like this:
body { background:
url('backgroundImage/png') repeat-x; }
The repeat-x repeats the image horizontally.
Current yahoo background has the following CSS property
body{
background: url(http://l1.yimg.com/a/i/ww/met/th/slate/gsprite_pg_slate_20110124.png) left -2335px repeat-x; /*unsupported fallback*/
background: -moz-linear-gradient(top, #fdfdfd, #e8edf0 1000px); /*Firefox*/
background: linear-gradient(top, #fdfdfd, #e8edf0 1000px); /*Standard*/
background-color: #dce2e7;
background-attachment: scroll;
}
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