Solved

Positioning DIV background image in CSS

Posted on 2011-03-20
12
296 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
Comment Utility
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
Comment Utility
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
Comment Utility
@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
 
LVL 40

Expert Comment

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

Author Comment

by:Mohamed Abowarda
Comment Utility
@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
Comment Utility
did you tried the workaround that i suggested?
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 12

Author Comment

by:Mohamed Abowarda
Comment Utility
gurvinder372: It would be more clear if you post code.

Thanks,
0
 
LVL 17

Assisted Solution

by:mreuring
mreuring earned 125 total points
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
I need example on how to do that.

Thanks,
0
 
LVL 12

Author Closing Comment

by:Mohamed Abowarda
Comment Utility
Question closed. Thanks,
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

772 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now