background-position: -200px 0;
one site says it crops an image from the bottom and displays the rest part
..another site is saying its shifting the image to the left..what exactly does it do ?
I am trying to implement CSS Sprites..having problem due to this positioning thingy...this is what I have implemented so far...its not working right..I have few links and I want a diff part of the image to be displayed when mouse is moved over a particular link...I am geting output as the whole image being displayed..it wont even crop it..I tried so many things like changing positioning, adding divs..what not..now I am so lost , I dont even know where I began..Could someone plz point out what am I doing wrong here ? Why is the image not getting cropped..sure something is wrong with this positioning X,Y values....
here's the code:-
<style type="text/css">
#sprite ul{background:url(images/image.jpg) no-repeat;
width:728px;height:1225px;display:block}
#ID1{background-position:0 -1000px}
#ID1:hover{background-position:0 -1000px}
#ID2{background-position:0 -1000px}
#ID2:hover{background-position:0-800px}
#ID3{background-position:0 1000px}
#ID3:hover{background-position:0 -600px}
#ID4{background-position:0 1000px}
#ID4:hover{background-position:0 -400px}
#ID5{background-position:0 1000px}
#ID5:hover{background-position:0 -200px}
#ID6{background-position:0 1000px}
#ID6:hover{background-position:0 -200px}
</style>
HTML:-
<div id="sprite">
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
<li>link5</li>
<li>link6</li>
</ul>
</div>
background-position: -157px 0; will shift the image 157 pixels to the left. It will not be cropped.
The main problem from your code is that you are setting the background image on the ul, but then changing the background position on the links. So your background position rules will have no effect as the links don't have a background. You want to instead set the same background image on all of the links, probably with something like:
#sprite ul a {
background-image: url(images/image.jpg);
background-repeat: no-repeat;
}
along with some appropriate dimensions, and then take it from there.
one site says it crops an image from the bottom and displays the rest part ..another site is saying its shifting the image to the left..what exactly does it do ?
If in doubt, trust the specification; horizontal position comes before vertical position.
#sprite ul
If you want to show part of an image as the background to a list item or anchor, then you have to set the background on that element. Here you are just putting the entire image as the background to the list itself, and everything else is placed on top of it.
Instead you need to put a copy of the image on each link.
#ID2:hover{background-position:0-800px}
You need a space between the two values
The background-position property is a composite property of background-position-x and background-position-y, so the first value is the horisontal position and the second value is the vertical position.
The position is the top left corner of the image in relation to the top left corner element, so a negative x value means that the image is placed to the left of the element, in effect cropping the image from left.
(So, the site saying that the image is cropped from the bottom has both the value order and direction mixed up.)
Related
I am trying to set a divider image between links in the navigation bar. I currently have it set up as a background image, positioned to the right. This works fine, except I also want the divider to appear to the left of the first link. I have tried adding background-position:right,left; to the first link class, but this doesn't work. Any ideas on how I would do this?
Assuming you don't need to support old school browsers, the easiest way is probably with multiple background images like this: http://jsfiddle.net/P25TC/1/
#nav li.first{
background:url(http://i.imgur.com/CED9fuN.png) no-repeat left, url(http://i.imgur.com/CED9fuN.png) no-repeat right;
}
I've got this peculiar bug I've been trying to fix today—-still no luck.
If you look at the example below,
http://vitaliyg.com/alpha/hire/
Here's what happens. The full-width background image loads in the correct position, centered along the y axis. Then when we hover over the image, the whole image jumps over to the middle, and slowly adjusts itself back to it's normal desired position.
What's causing this is left: 50%; margin-left: -960px;. This allows us to center the image correctly to begin with. If we didn't have this CSS, the hover wouldn't jump, but the image would load anchoring itself on the top left of the browser.
In the link above, the red box is the content div. The blue box is some text that will be parallaxing with the background-image.
Here is what I am trying to achieve:
Make the background-image appear centered.
When the user hovers over the background-image, it would not jump to the middle of the page.
And lastly, decrease the width of which the user would be able to "parallax" on the x axis. The way it is now, is that the user can see from side to side of the image if patient enough. I want the parallax to be very subtle.
Also, I'm using jParallax, found here:
http://stephband.info/jparallax/
Thank you for your help!
Once you set the position via CSS for the background image, it seems jQuery Parallax plugin alters those settings. The solution then is to apply those settings after the jQuery Parallax has dealt with that parallax layer.
First, remove the margin-left and left from your .parallax-layer#background class.
.parallax-layer#background {
background-image: url('../images/bg.jpg');
background-repeat: no-repeat;
background-position: center bottom;
width: 1920px;
height: 620px;
}
Ideally, center the blue box using the same method (unless you want it partially off screen). I've also removed non essential CSS based on your HTML.
.parallax-layer#tagline {
background-color: blue;
width: 400px;
height: 400px;
}
Finally, add the CSS rules that were removed from the background and tagline selectors so they are applied after jQuery Parallax has manipulated those items.
jQuery(document).ready(function(){
jQuery('#parallax .parallax-layer')
.parallax({
mouseport: jQuery('body')
});
jQuery('#background').css({marginLeft: "-960px", left: "50%", bottom: "0px"});
jQuery('#tagline').css({marginLeft: "-200px", left: "50%"});
});
You no longer will see the large white section (body background color) to the left of the background image when the mouse enters the viewport.
This jQuery Parallax plugin aligns everything top/left by design. If the mouse enters the
viewport from the right of the blue box, that box animates to that location correctly.
However, should the mouse enter from the left side of the blue box, that box will 'jump' to the cursors location. You might consider removing the last jQuery line above so the blue box is top/left upon browser load or use a lower percentage value like 25%.
For those that landed on this Question/Answer and wanted some real markup to work with, I have set up two jsFiddles. One jsFiddle duplicated the problem and the other has the solution as shown above.
Original Problem - jsFiddle
Fixed Applied - jsFiddle
Both jsFiddles are in full screen mode so the Parallax effects can be seen.
Instructions to view Original Problem:
1. Launch the above Original Problem jsFiddle Link.
2. Press the jsFiddle Play Button, being careful not to enter the viewport. If the blue box moves in any way... you've entered the viewport so press the play button again.
3. Enter from the top/left of the viewport and you will see the problem... the HTML Body (white color) is seen as the background image readjusts itself.
4. Press the Play Button at any time to reset the webpage.
To see the Fixed Applied, either launch the link above or at the Browsers Address Bar modify the URL so you see revision 1 of that jsFiddle. (i.e., http://jsfiddle.net/UG4Sq/1/embedded/result/ )
The blue box indicates via text which jsFiddle your viewing. Cheers!
I have a 3 elements stacked on top of each other. The top element is the overlay content. The second element is a background border image. The bottom element is a background.
What I want to do is hollow out the middle element, so that I can see through the top element into the bottom element, but leave the border of the middle element surrounding the top element.
http://jsbin.com/unimux/4/edit
As you can see the middle element is blocking the view to the bottom element.
Edit: I did try using border-image but it wouldn't render correctly for me with border-radius.
Edit2: is it possible to get the desired effect with border-image? Kudos to anyone who can make it look not terrible with border-image.
Edit3: Some progress based on Zuul's answer:
http://jsbin.com/unimux/15/edit
Setup a new element, with a class, e.g., .apple and place it over all other existent elements with the same image as the bottom one:
See your JS Bin Example Altered!
div.apple {
margin: 100px;
width: 200px;
height: 200px;
background: url(http://www.ipadwallpapersonly.com/images/wallpapers/1gk0rv4ng.jpg) center center;
}
Having the image centred and by give a correct margin value, it simulates the "hollow" effect at the div.middle.
See the result preview:
If the elements dimensions aren't the same, the use of CSS position helps keepping everything into the proper place:
An example here!
You can't really do that with the current state of CSS. Maybe just put the bottom element on top of the middle one, and work?
As per egasimus, you can't really do that with CSS.
Try something like this though, with four divs creating the 'window'.
I need some help setting a css button.
My intention is having 3 images inside a button forming a background image, lets call pic1, pic2 and pic3.
I set pic1 as left and pic3 as right making the borders, I want pic2 to repeat-x filling all remaining space in between, the problem is that pic2 will gladly overwrite pic3.
what I have so far:
button {
background: url("images/btn_00.jpg") no-repeat scroll 0 0%,
url("images/btn_01.jpg") repeat-x scroll center center,
url("images/btn_02.jpg") no-repeat scroll right center transparent;
}
Do what I want is possible? how, please?
Your styles are using CSS3 -- so be warned (if you did not already know) that this won't work in IE8 or lower.
The answer to your question lies in understanding the Stacking Order of Multiple Backgrounds -- you need to have pic 3 stacked on top of pic 2, which means it should be listed before pic 2. (This is counter-intuitive with respect to how z-index works to determine which elements paint over the others.)
Short answer: no.
One Element can only have one backgroud.
Perhaps you can do it with three elements in a element like:
<div id="mybutton">
<img src="leftimage.png" />
<span class="mymiddleElement">MyText in the Button</span>
<img src="rightimage.png" />
</div>
and set the backgroud of the .mymiddleElement with css
I have background style of #bg_inner as background:transparent url(../images/bg_inner.jpg) repeat-x scroll center top;. But only part of it appears. Any idea why?
Test link:
http://www.aslanyurek.com/inner.asp?Section=myaccount&SubSection=signin
It's because #bg_inner is only the size of #header, which is 35 pixels. There's nothing to display the background in once #bg_inner's block is drawn. See, you have the inner form set to float left, which brings it outside of #bg_inner. Basically, you've shortened your own header section.
You should just define your background properties on the body element itself and remove #bg_inner entirely. Either that or remove the float:left; property from the form element.