Solved

Positioning DIV background image in CSS

Posted on 2011-03-20
12
299 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
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Are these icons a web font? 3 21
How to control cache of some js files ? 7 42
JS Event Does not Trigger From File 2 28
Bootstrap 3 - Style a dropdown 1 15
This article discusses how to create an extensible mechanism for linked drop downs.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

828 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