[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 306
  • Last Modified:

Positioning DIV background image in CSS

I want to change the background-image position in DIV as the following:

X: from 100px to 200px
Y: from 50px to 100px

Additionally, I want to enable image-repeat to repeat Y (from 50px to 100px)
0
Mohamed Abowarda
Asked:
Mohamed Abowarda
  • 5
  • 3
  • 2
  • +1
4 Solutions
 
Gurvinder Pal SinghCommented:
you can only give the starting point of image, but you cannot control the size of image.

In simpler words, you can give the where the X and Y coordinates will start from ( check http://www.w3schools.com/css/pr_background-position.asp), but you cannot give where it should end. It will automatically be governed by the size of the div.

One workaround could be to overlay an child div of that much size on top of that div, and give the background image to that div.
0
 
GregArnottCommented:
So you're asking to alter the position during an event such as a click?

Image repeat from 50-100px ... is that after you've moved it from 50 to 100px on y, then tile along y where you've moved across?

The first, is using jQuery:
$('#some-div-id')
	.css( {backgroundPosition: "100px 50px"} )
	.click(function(){
		$(this).stop().animate(
			{backgroundPosition:"(200px 100px)"}, 
			{duration:500})
		})

Open in new window


Not 100% sure about IE as it can be a bit funny regarding background position. Might have to use it's own personal variant in that case, such as:
   if($.browser.msie) {
            $("#some-div-id").css('background-position-x') = '200';
            $("#some-div-id").css('background-position-y') = '100';
  }

Open in new window


For a background to be placed in one spot, then to have another section of background tiled would be considered CSS3 multiple background. This can lead to some very interesting results. (IE9rc3, FF3.6+ etc only)

To effectively get that background tiling, it'd be better to have the tiled image as a background of another div or other element on top or behind the main div in question, that is 50px wide. Very simple css then, no js required.
0
 
Mohamed AbowardaSoftware EngineerAuthor Commented:
@GregArnott: No, that's not what I am looking for, I want the div to show piece of image, for example:
x1 = 100, x2 = 200
y1 = 50, y2 = 100

When I resize the div, the piece of image will repeat.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Gurvinder Pal SinghCommented:
did you tried the solution that i had suggested?
0
 
Mohamed AbowardaSoftware EngineerAuthor Commented:
@gurvinder372: I know CSS background-position, however it doesn't fix the problem, what's the alternative way to achieve what I am trying to do?
0
 
Gurvinder Pal SinghCommented:
did you tried the workaround that i suggested?
0
 
Mohamed AbowardaSoftware EngineerAuthor Commented:
gurvinder372: It would be more clear if you post code.

Thanks,
0
 
mreuringCommented:
I think it's important to make a distinction in what is required:
- Clipping an image and then repeating it? (Not possible, you'll need to clip the image using photo-editing software and store it as a separate image)
- Repeating an image but only on a 'clipped' part of the background (gurvinder's proposal should work in CSS2, CSS3 has a proposal solution for it which can't be relied on yet).

I think the first one is what you're looking for, and without scripting it, that will never work :(
0
 
GregArnottCommented:
The easiest way to achieve seeing part of a background image, is to have the whole background image in one DIV, and another div over the top with a full background image with a cutout 100x50 in the middle at the coordinates desired.

This cover image with cutout could have the tiled effect on it offering a solution that meets your requirements.

Your elaboration of question is for a 100x50 section of background top be captured, then tiled when the div is resized. This goes outside the realm of javascript abilities, and would need to use something like PHP or ASP, and for their image manipulation extensions to be installed. (GD2 and AspJpeg respectively as common examples). Going to Hotscripts might end up getting lucky with a script that will suit your need.

All depends on your server environment. Good luck.
0
 
mreuringCommented:
Actually, the easiest way is to achieve a partial is to put it in the background of a div the size of the partial you want and then place the image at a negative top and left offset to achieve the correct cutout. One element is all you need.

Tiling the partial upon resize isn't outside the realm of JavaScript abilities either, it's merely insane :) I wouldn't attempt to come up with a working solution for some points at a technical forum though.
0
 
Mohamed AbowardaSoftware EngineerAuthor Commented:
I need example on how to do that.

Thanks,
0
 
Mohamed AbowardaSoftware EngineerAuthor Commented:
Question closed. Thanks,
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 5
  • 3
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now