I have a little black border around my page, just on the left and top. I can get rid of it, but I want the background to be stretched. If I make it so it's not stretched, it goes away. I don't want that. When I make it not stretched, it repeats instead. I want it to do both. Here's my CSS.
body {
background: url(background.png);
background-width:100%;
background-height:100%;
background-size: 100%;
}
Without the background-size: 100%; I have the border there, but it is also the cause of the repeating background.
Crop Image canvas to get rid of borders
Nevermind, I figured it out, I needed to do the linear-gradient with width:100vh;.
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;
I already googled this for a while, but simply can't find the answer. So, my question is: how do sites like this
http://tasag.de/
work? There are several background images that are shown behind the content box when you scroll down. When you scroll up and down you see that they occupy the whole screen, but sometimes you can see two of them, one at the upper an one at the lower part of the screen, at the same time. How does this work? I simply can't figure it out.
Thanks a lot
If you look at the css of one of those backgrounds you find the key declaration:
background-attachment: fixed;
This means the background doesn't move, even when the user scrolls, allowing you can have different scrolling divs and the background will always look fixed
Here I prepared a sketchy fiddle: http://jsfiddle.net/3UpUb/
.container2 p{
background-image: url(http://tasag.de/wp-content/uploads/2014/01/img-3-blur.jpg);
background-repeat: repeat;
background-position: center top;
background-size: auto;
background-attachment: fixed;
}
You can use Parallax scrolling and put the speed to 0. Then the image stays fixed but will change when you scroll to next background image.
I used this Parallax plugin.
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;