How can I use background-repeat with multiple images? The primary background image is static and only sits at the top of the unscrolled page.
Once the user starts to scroll down on longer pages, there is a secondary background image than blends in with the first image.
This image repeats infinitely (if necessary) for long pages.
How can I do this?
This is what I have tried:
background-image:
url(../images/background/large/static.png),
url(../images/background/large/repeat.png);
background-repeat:
no-repeat,
repeat-y;
background-position:
0px top,
600px top;
The static.png background page is on top and displays from 0 to 600px. The repeat.png then starts at 600px and keeps repeating down to infinity if necessary. The static page should only display once at the very top. Any suggestions? Thank you!
I think one big problem is, background-repeat is only applied once and to both images.
Got everything working. The issue was with the background-position. I did not understand the syntax. 600px from the left and align to the top is what it says in the above example. I thought its meant 600px from the top. When I tried using the real number it was putting the image way off the screen at right making it feel like it wasn't working. I understand the syntax now and all is working perfectly. Thanks!
background-image:
url(../images/background/large/static.png),
url(../images/background/large/repeat.png);
background-repeat:
no-repeat,
repeat-y;
background-position:
left top,
left 600px;
Related
I'm wondering how can I make a background image fixed on one side, so when the user makes the window smaller, the background image shrinks only from one side, and the other side stays clear. I got this idea because I got a background image and i need the right side of it to be always on screen. Thanks.
You can use the background properties to do this, most notably background-attachment: fixed; and background-position: right top; This will cause the image to "stick" to the top right of the screen.
Also, if in the future the image doesn't work, just replace it with any other placeholder image. This one was picked just to showcase the static nature of the spider's position.
body {
background-image:url("http://creepyhalloweenimages.com/free_halloween_photos/backgrounds/spider_orange_copyspace.jpg");
background-attachment: fixed;
background-position: right top;
background-size: cover;
}
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.
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 am a beginner in designer, I had to develop a small website, where i designed a ui, but i have problems regarding css.
Here's a style i have written
background-image: url("../images/border_bottom_left.png"), url("../images/border_bottom_right.png"), url("../images/border_top_left.png"), url("../images/border_top_right.png");
background-position: bottom left, bottom right, top left, top right;
background-color:grey;
background-repeat: no-repeat;
which inserts four images to four corners and fills all the other part with a grey background
Now, instead of grey, i wanted to insert an image, So i replaced background-color with background-image: url("../images/bg_content.png") but it does not help me. I tried to use the bg_content.png in the first background-image and write its corresponding position to center, it didn't work?
Can anyone of you please help me!
Simply add the image to your background-image and your background-position, then expand your background-repeat:
background-image: url("../images/border_bottom_left.png"), url("../images/border_bottom_right.png"), url("../images/border_top_left.png"), url("../images/border_top_right.png"), url("../images/bg_content.png");
background-position: bottom left, bottom right, top left, top right, top left;
background-color:grey;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
http://jsfiddle.net/5k8eg/2/
background-color cannot specify a url, only a color. You will need to use more than one div (or whatever element you are using) to do what you are trying to do.
This is probably because your background image doesn't get repeated (as do the corner images) therefore, it will get covered up by one of the corner pictures. Try to set the first background-image to repeat:
background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
Are you sure you specified center for X and Y of the 5th image ?
background-position: bottom left, bottom right, top left, top right, center center;
http://jsfiddle.net/YhZ8e/
As long as I know background-color doesn't accept image files. Try background-color:#4B4C4D instead. For picking up HTML colors you can use this online color picker.
EDIT: place a div inside another div and give those divs different background-image values. One div can have only one background image.
However in CSS3 you can have more than one background images. Visit this link for that purpose.
I have an element on my app that needs three different backgrounds that should be stacked (?) horizontally, one following the other.
SliceA being the first of the 3, is 66px wide, then I would want to have SliceB start right after SliceA ends, and repeat-x until it stops right before SliceC starts (and this final slice has 21px—if it matters).
Right now if I do:
background-image: url('imgs/hint1_sliceA_66x29.png'), url('imgs/hint1_sliceB_1x29.png'), url('imgs/hint1_sliceC_21x29.png');
background-repeat: no-repeat, repeat-x, no-repeat;
SliceB will in fact repeat in the x axis but through the entire width of the element (note that these slices have transparency, so you can ultimately see if one of the background slices goes under another one). Anyway I naively tried this:
background-position: left bottom, 66px -21px bottom, right bottom;
But it apparently doesn't allow me to define the left and right margins of one of the background elements.
Does anyone have a workaround on how I can achieve this? Any ideas? Thanks!
If your images do not have any transparency then what you have will work as long as you change the orders of the backgrounds (i.e move the middle repeating background to last in the list), example here. In this example the background images do have transparent backgrounds, which allow you to see the overlapping backgrounds. You may want to test this for browser compatibility, it works in Chrome and Firefox on Linux.
background-image:
url('imgs/hint1_sliceA_66x29.png'),
url('imgs/hint1_sliceC_66x29.png'),
url('imgs/hint1_sliceB_66x29.png');
background-position: left bottom, right bottom, left bottom;
background-repeat: no-repeat, no-repeat, repeat-x;
If this is not the case and your situation allows, it may be easiest to convert your images to ones that do not have a transparency element.
Alternatively, you could use a padding and the background-clip property, example:
background-clip: border-box, border-box, content-box;
-webkit-background-clip:border-box, border-box, content-box;
padding: 0 66px;