Solved

Positioning DIV background image in CSS

Posted on 2011-03-20
12
298 Views
Last Modified: 2012-05-11
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
Comment
Question by:Mohamed Abowarda
  • 5
  • 3
  • 2
  • +1
12 Comments
 
LVL 40

Accepted Solution

by:
gurvinder372 earned 63 total points
ID: 35178072
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
 
LVL 6

Expert Comment

by:GregArnott
ID: 35178148
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
 
LVL 12

Author Comment

by:Mohamed Abowarda
ID: 35178186
@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
Are your AD admin tools letting you down?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

 
LVL 40

Expert Comment

by:gurvinder372
ID: 35178559
did you tried the solution that i had suggested?
0
 
LVL 12

Author Comment

by:Mohamed Abowarda
ID: 35178639
@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
 
LVL 40

Expert Comment

by:gurvinder372
ID: 35179074
did you tried the workaround that i suggested?
0
 
LVL 12

Author Comment

by:Mohamed Abowarda
ID: 35179483
gurvinder372: It would be more clear if you post code.

Thanks,
0
 
LVL 17

Assisted Solution

by:mreuring
mreuring earned 125 total points
ID: 35181906
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
 
LVL 6

Assisted Solution

by:GregArnott
GregArnott earned 62 total points
ID: 35185534
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
 
LVL 17

Assisted Solution

by:mreuring
mreuring earned 125 total points
ID: 35185701
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
 
LVL 12

Author Comment

by:Mohamed Abowarda
ID: 35454675
I need example on how to do that.

Thanks,
0
 
LVL 12

Author Closing Comment

by:Mohamed Abowarda
ID: 37529233
Question closed. Thanks,
0

Featured Post

Best Practices: Disaster Recovery Testing

Besides backup, any IT division should have a disaster recovery plan. You will find a few tips below relating to the development of such a plan and to what issues one should pay special attention in the course of backup planning.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

778 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question