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
Related
I am trying to make the background image be positioned to the bottom left of a div and cover the entire div, without distorting it's ratio.
Whenever I use
background:url("img.jpg") no-repeat left bottom fixed;
it goes to the left of the body and the bottom of the body, not the div. How do I get it to use the div as the frame of reference and not the body?
Fiddle below
http://jsfiddle.net/UFpYd/3/
How about this:
background: url('img.jpg') no-repeat scroll center top/cover transparent;
EDIT:-
After watching your JSFiddle you may try this:
background: url('img.jpg') no-repeat left bottom;
JSFIDDLE
Not sure if you are looking for this:
background: url('img.jpg') no-repeat left bottom;
or this:
background: url('img.jpg') no-repeat left bottom fixed;
Clarification: Your fiddle you posted uses center top for background image positioning. It should work as you expect if you use left bottom (whether fixed or not will depend on how you want your image positioned).
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'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/
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;