Lets say I have an image with the width and height of 1700 x 1129px. What is the best way to be able to repeat this image so that you cannot tell that it has been repeated. I have tried using repeat-y but it looks like its another graphic.
There is nothing to do with css. Your image does not allow repeating. To repeat an image without bad effects your image has to have same start and end in the direction you want it to repeat.
There's a quite simple trick: end your image sides in a static color (like black or dark brown in your example), center your background image and color fill your background
body { background: black url(image.png) no-repeat center top; }
Use background-size property.
If you have a background which you think can be disguised by repeating horizontally then do the following.
background-size: 50% 100%; background-repeat: repeat-x;
if you think the background can be disguised by repeating vertically then do the following:
background-size: 100% 50%; background-repeat: repeat-y;
You will have to make a seamless image, that means that the upper and lower edges as well as the left and right edges of the image match their opposite edge perfectly, so no angles and color transitions being visible. The css approach using background-repeat is totally fine.
That's often used in CG, mostly in the 3D world.
There's plenty of tutorials around on making an image seamless, found one here.
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 some divs, and they have their backgrounds set as images using this:
background:url(myimage.jpg);
Now what I'm looking to do is set a border on that image that is set to the background.
I don't want to set a border on the div as this does not give the desired result, it must be a border on the image.
Not sure if this is possible, is it?
You could try using multiple backgrounds, by setting your base bg image and a second one as a border.
#container {
background-image: url(Main-bg), url(Border-img.png);
background-position: center center, left bottom; /* border bottom in this case */
background-repeat: no-repeat;
}
It is not possible to do it precisely as you've mentioned. Since the background image is styling, rather than content, no additional styling can be added to it.
The best option would be to create a different image file to serve the bolder border.
I have been using css for a few years but have never ventured past using fixed width layouts. I'm looking at using a fluid layout for my next site, or as much percentage as I can, but I have a question that worries me.
If I have an image with 1900px width set as a background, I understand that it simply shrinks when the browser calls for say 1600px.
What happens when the resolution calls for a 2000px width? I will be left with white space, correct? How can one avoid this? I feel like I should probably just throw out that its not an image that can be repeated horizontally.
A trick usually used is to have the image be "inner-glowed" with a color, then set the background color the same as well.
Suppose your image doesn't tile, and has black "inner-glow" or "feather" effect, then you can make the container's background color as such:
background-color: #000;
background-image: url(your_bgimage.jpg); /* image with black borders due to effect */
background-repeat: no-repeat;
background-position: center center;
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
I was originally using the following code:
background-image: url(../images/tabbottom.gif);
background-repeat: no-repeat;
background-position: left bottom;
The problem is when I convert it to a sprite, I have a fixed background-position, say 0px -400px;
Now how do I place it at the left bottom then?
Also, can I use background-repeat with a css sprite?
Thank you for your time.
background-repeat will not play nicely with your css sprite. nor will setting it to bottom left. Unfortuantely the only way around this is to use static width and height. In this case, you're better off not using the sprite
Now how do I place it at the left
bottom then?
By knowing the pixel dimensions of the element and positioning it carefully
Also, can I use background-repeat with a css sprite?
Sure - so long as you only repeat in one direction and your sprites are arranged in a line (not a grid).