?
Solved

Positioning DIV background image in CSS

Posted on 2011-03-20
12
Medium Priority
?
303 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 3
  • 2
  • +1
12 Comments
 
LVL 40

Accepted Solution

by:
Gurvinder Pal Singh earned 189 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
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
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:Gurvinder Pal Singh
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 375 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 186 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 375 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

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

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

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Suggested Courses

752 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