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.
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;
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.
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
Is it possible that I can create a margin/padding between the background image and container that holds the image? In other words, I need to move the background image sprite_global_v3.png 20px to the right of the left border of #nav-primary.
Here the position "0 -470px" are used to pick the right picture from sprite. And I don't know how to apply a padding/margin of 20px in order to achieve what I expected.
#nav-primary {
background:url("http://static02.linkedin.com/scds/common/u/img/sprite/sprite_global_v3.png") no-repeat scroll 0 -470px transparent;
}
<div id="nav-primary">
<span>Hello World</span>
</div>
Based on http://www.w3schools.com/css/css_background.asp
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
If I understood correctly, the background-position is used to control the alignment of the background image. Now I need to control alignment and choose the right picture from a sprite. I don't know whether or not I can mix it together.
Thank you
No, there is no concept of padding/margin for background images.
Options:
1) Positioning the background (as already stated). The key is that the container would have to have fixed dimensions.
2) Nest a container inside a parent container. Parent gets the padding, child gets the background image.
Given that you are trying to do this with a sprite, both are likely options since a sprite has to have a fixed sized container anyways. For option 1, you'd need to make sure your sprite images have enough white space between each other in the file.
No, you can't mix them together.
You can place an image at an offset from the corner:
background-image: url('img_tree.png');
background-repeat: no-repeat;
background-position: 20px 20px;
But you can't combine this with the sprite techinque. This technique uses the fact that the element is smaller than the background image to clip the image, but you can't clip the background image 20 pixels into the element.
You can specify the exact position of the background to the pixel.
If you wanted a 10-pixel gap on the left-hand side, for example:
#nav-primary {
background:url("http://static02.linkedin.com/scds/common/u/img/sprite/sprite_global_v3.png") no-repeat scroll transparent;
background-position:10px 0px;
}
That being said, it looks like you already specified it to be set at (0, -470). Does that not work?
The background-position property allows for percentages and values, e.g. "20px 0", which I think is what you're looking for.