Yes, I Position My Background Image with jQuery
Topic: jQuery
So, notice that green hook on the left there? How much of it can you see? And what happens if you resize the window?
Now, if you’re a front-end guy, you know that a background image cannot extend outside of an element. But what if you want to position that background relative to the position of an element, but outside of that element? I had the same problem…
Now, I’m a huge fan of jQuery, so I decided to go that route. Here’s what I did:
$('body')
.css('background-position',
$('#container').offset().left - 320 + 'px ' +
$('#container').offset().top + 'px');
What does that do? jQuery finds the body element: $('body') and it sets the background position using .css('background-position', value). But, we need to get the position of my #container element, so we do that using $('#container').offset().left (with a 320px nudge) and $('#container').offset().top.
Put that in jQuery’s $(document).ready(function() and huzzah!
Well, what happens if you resize? Uh-oh, one more thing to do. I promise it won’t be hard though. Let’s just bring jQuery to the rescue again using $(window).bind('resize', function(). And, to keep up with DRY coding principles, we’ll pull it out into an alignBG() function, giving us:
function alignBG(){
$('body')
.css('background-position',
$('#container').offset().left - 320 + 'px ' +
$('#container').offset().top + 'px');
}
$(document).ready(function(){
alignBG();
$(window).bind('resize', function() {
alignBG();
});
}
And there you have it! That’s how you can position a background image based on a different element’s location in jQuery making sure that it’s in the right place on a resize.
My brother recommended I would possibly like this web site. He was once entirely right. This publish truly made my day. You cann’t consider simply how much time I had spent for this information! Thanks!
My brother suggested I may like this website. He used to be totally right. This post actually made my day. You can not imagine just how much time I had spent for this info! Thanks!
Oh my goodness! an incredible article dude. Thanks However I am experiencing challenge with ur rss . Don’t know why Unable to subscribe to it. Is there anybody getting an identical rss downside? Anybody who knows kindly respond. Thnkx
Heya i am for the first time here. I came across this board and I in finding It really useful & it helped me out much. I hope to present something back and help others such as you helped me.
Youre so cool! I dont suppose Ive learn something like this before. So nice to seek out any individual with some original thoughts on this subject. realy thanks for beginning this up. this web site is something that’s wanted on the web, someone with a little originality. useful job for bringing something new to the web!
My brother recommended I would possibly like this blog. He was totally right. This publish truly made my day. You can not imagine simply how so much time I had spent for this information! Thank you!
Good work once again! Thank you:)