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.
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'm trying to add multiple background-images to a DOM element (a td) using CSS. I can specify multiple background images that stack on top of each other like so:
td{
background-image: url("img1.svg"), url("img2.svg");
}
This results in img2 being stacked on top of img1. However, I need to specify that one background image should be off-center, while the other centered. Is there a way to do this in CSS, or will I need to get fancy to do this?
You just do the same with the position rule:
td{
background-image: url("img1.svg"), url("img2.svg");
background-position: center center, left top; /* or */
background-position: center center, 0px 0px; /* x y */
}
The first apply to the first image, the second to the second image and so forth.
For more details:
https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
You can use background-position property
background-position: left top, center center;
You can use background shorthand property if you wan't to type less. I really prefer shorthands.
+background-position +background
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;