I've got following setup
background-image: url(image1.png) , url(image2.png);
Idea is that image1.png repeats everywhere whereas image2.png should only start 200px from pages top and only repeat-x. I know you can position background like:
background-position: top left, left bot etc...
But how do I position it 200px from top of the page? and make it repeat-x?
You'll want to use the shorthand for background:
{background: url(image1.png) repeat, url(image2.png) 0 200px repeat-x;}
http://www.css3.info/preview/multiple-backgrounds/
Related
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'm having a problem with positioning two background images in Chrome.
In FF and IE the images are right where I want them to be, but in Chrome they both just sit in the top left corner.
So Chrome ignores the background-position property.
When I remove the 150px from that property, it works, but I want the images 150px from the bottom.
#wrap {width:100%; position:relative;z-index:1; background-color:#ebebeb; background-image: url("/portals/0/images/bosch_rechtsonder.png"),url("/portals/0/images/meba_linksmidden.png"); background-position: right bottom 150px, left bottom 150px; background-repeat: no-repeat;background-attachment: scroll, scroll;}
Does anyone have another solution to this?
Thanks in advance!
What do you mean by giving 3 values?
background-position: right bottom 150px, left bottom 150px;
The value right is fine, bottom is fine. Why is the 150px there? Remove it. Change it to:
background-position: right bottom, left bottom;
You know that it is a fixed positioning of 150px from the bottom. The only way is to give 150px of whitespace or setting it transparent using an image editor and put it on the background. It cannot be controlled by pure CSS, without knowing the element's height.
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;
I've tried
background-position:100px 0 0 0;
The CSS is curently
background: white url(images/bg.jpg) no-repeat top fixed center;
I'm trying to get the background inline with the top of the image.
Thank you,
Tara
The background-position property works differently from something like margin or padding. Instead of declaring all four sides, you only declare two values: where it is horizontally, and where it is vertically. So in your case, you'd probably want something like this:
background:white url(images/bg.jpg) no-repeat left 100px;
By default, it assumes that you're starting from the top, left corner. So left 100px is saying, "Keep it on the left, but go 100px down from the top." You can even use negative values. More info on background-position