I am using background-repeat:repeat-x; to repeat a background image horizontally, but I noticed that there is a white space after the earlier image and before the next image.
How can I get rid of this white-space?
Here is the page where this is happening: https://dl.dropboxusercontent.com/u/270523/help/search/new.html
One may have to make the browser window wider to see the landscape background image repeat.
A little transparency on each side is in the image file. Crop the image.
Using the Chome Developer Tool, you can see that your SVG file is one pixel larger than the PNG version. The SVG is also layered higher and (because of the size difference) is scaling differently than the PNG. Try cropping the image or switching the order of the layers -
From
background: url(dawn.png) top left repeat-x;
background: url(dawn.svg) top left repeat-x;
To:
background: url(dawn.svg) top left repeat-x;
background: url(dawn.png) top left repeat-x;
Related
I would like to reproduce the Apple large background effect (apple.com)
The background, while larger than the browser, does not make the horizontal scrollbar appear, and when we make the browser smaller than 1024px, then the background is locked on the left, adopting the normal behavior of a normal 1024px wide website, while online solutions only offer to center the background at all times.
Anyone knows how to do this please?
set Background from CSS,
following html sets background without making horizontal scrollbar appear
html {
background: url(images/bg.jpg) no-repeat center center fixed;
background-size: cover;
}
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 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;
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