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;
Related
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;
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 an element which has 3 backgrounds. One which repeats along the x-axis once at the top.
The second should show once in the top left corner and the third in the top right corner.
But the second and third backgrounds are not showing.
Here is the CSS:
section.services .container header {
background: url('../images/style/header_gradient.jpg'),
url('../images/style/header_gradient_cover_left.png'),
url('../images/style/header_gradient_cover_right.png');
background-position: left top, left top, right top;
background-repeat: repeat-x, no-repeat, no-repeat;
}
It's because the order of the backgrounds are as they appear in your rule. This means, the first one is always on the top, and the last one behind every one else. So you should put the first one as the last one so that the one that repeats over the x axis is not overlapping the others:
section.services .container header {
background-image: url('../images/style/header_gradient_cover_left.png'),
url('../images/style/header_gradient_cover_right.png'),
url('../images/style/header_gradient.jpg');
background-position: left top, right top, left top;
background-repeat: no-repeat, no-repeat, repeat-x;
}
Additionally, to have a more organized/cleaner code, I would change background to background-image as I did.
All Images are overlapping each other. Try disabling one by one in firebug and then check
Additionally, to have a more organized/cleaner code, I would change
background to background-image as I did.
Keep in mind that the white background from your browser might override the images if the element name is 'background-image' instead of 'background'.
I know that it's cleaner code but it somehow messed up my images.
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.
When I use gradients, with little content, the gradient repeats, how can I prevent that?
http://jsfiddle.net/mcqpP/1/
I can try using html { height: 100%; }, but when my content requires scrolling ... the gradient repeats
http://jsfiddle.net/mcqpP/3/
How can I fix this
You need to set percentages on the CSS gradients, not absolute pixels. And as long as you only care about modern browsers (i.e. you don't care about IE6) then I suggest you stay away from images, the CSS works fine.
I'm pulling my answer from the answer to this question that I wish I could upvote 100 times:
How to get a vertical gradient background to work in all browsers? That accepted answer has everything you need with full cross browser compatibility.
Here's where I took your example and made it work: http://jsfiddle.net/HJvpf/1/
body {
background: -moz-linear-gradient(top, red 0%, blue 100%);
background: -webkit-gradient(linear, left top, left 100%, from(red), to(blue));
}
Oh and in your 2nd jsFiddle link, the reason it was repeating the gradient is because you set height 100% on html but the gradient was on body. You move that height: 100%; to the body and it works fairly well, but as you can see in my solution you don't need to specify height at all.
Edit: So you don't want it to repeat, but you also don't want it to take up the entire height. Just set repeat-x. http://www.w3schools.com/css/pr_background-repeat.asp
body {
background: -moz-linear-gradient(top, red, blue) repeat-x;
background: -webkit-gradient(linear, left top, left bottom, from(red), to(blue)) repeat-x;
}
To have the bottom gradient color fill the rest of the space:
body {
background: blue -moz-linear-gradient(top, red, blue) repeat-x;
background: blue -webkit-gradient(linear, left top, left bottom, from(red), to(blue)) repeat-x;
}
Why not render your gradient out as an 1px-wide image and use something like the following:
body {
background-color: #fff;
background-image: url("images/background.jpg");
background-position: center top;
background-repeat: repeat-x;
}
Setting the background-repeat value will help you control how the background... repeats. In this case it would be rendered as a solid band across the top.
http://www.w3schools.com/css/pr_background-repeat.asp
Also, using an image should work across all browsers, whereas the moz-gradients could be problematic. The image method above should render very predictable results across all browsers.
I had the same problem but realised that it made sense and so just accepted the scrolling / repeating gradient. You could set a fixed height, not %, but to ensure that the gradient didn't repeat you would need to set the height as bigger than anybody's screen who wants to view it. And you don't know what resolutions people have. My advice is to just leave it.