Solved

Stretching the baclground image in panel

Posted on 2010-08-17
15
474 Views
Last Modified: 2012-06-27
Hello experts,

I am using a panel whose background image is set. Though I dont want the background image to get tiled but it should stretch inside the panel. How much ever small the image is, it should get stretched and fit to panel according to the size of panel.

How do I get this functionality??

Please note that there is a specific reason that I want to stretch the panel background image and I cannot use any <img> tag.

Please do let me know the suggestions.

Thanks

Regards,
Baz
0
Comment
Question by:baz86
[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
15 Comments
 
LVL 12

Expert Comment

by:Ramkisan Jagtap
ID: 33461686
I think, the image will need to be of the correct width. You can't get a css background image to stretch to fit a panel. The only other way is to have an image <img> sitting inside the DIV, but with a lower z-index than everything else. It's somewhat of a hack.

Please check following link :

http://www.vbforums.com/showthread.php?t=538438

Regards,
Ram
0
 
LVL 6

Expert Comment

by:hehdaddy
ID: 33461767
This is probably what @ramkisan was saying, but you can easily do this using CSS.

Instead of using a CSS background image, use a standard IMG, and set its class properties to something like this:

#img.source-image {
      width: 100%;
        height: 100%;
      position: absolute;
      top: 0;
      left: 0;
}

Height will only work if all the parents up the chain have height set to 100%.

Another alternative is to use jQuery and a jQuery plugin that will do it for you. I saw a few in the jQuery plugins directory at the site. http://www.jquery.com
0
 

Author Comment

by:baz86
ID: 33463845
Actually there is a specific reason because of which I cannot use  tag inside the panel. It has to be the background image of the panel.
So isnt there any way by which I can change stretch the background image?

Hope there is. :(

Thanks

Baz
0
PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

 
LVL 12

Expert Comment

by:Ramkisan Jagtap
ID: 33463865
@Baz : Can you please share that reason? If possible we can give you aa another solution.

Regards,
Ram
0
 

Author Comment

by:baz86
ID: 33464172
Ok
I am creating a map for several countries for which I need a blank map template of that country so that I can label cities on that blank template.(Label cities means creating labels at run time of cities and displaying it on the template.)

I also have a functionality of image panning wherein user can drag the image in a parent panel.(all this is inside a parent panel.)

So if I place a image tag inside the panel(child) to be my blank map template..labels would be visible on the image. But when I move(drag) the image, only image would move and city labels wouldnt because labels are actually placed on panel(child) and not on image. As far as I know, we cant place labels on the image(control on control) can we?

So that is the reason if I set background image of the panel to that of empty map template then even the labels along with the template can be dragged. (since panel is a container and can hold controls like labels).So that background should fit(stretch according) to the size of panel otherwise city labels are moved.
And I cant even keep the size of image equal to size of the panel(manually using some photo editor) because there are various levels of zooming so I cant have those me pictures of different sizes.(and that too for each country! :(.....nah..)

Hopefully I have not confused you all.

Do let me know if you havent understood any part of whtever I wrote and also if there is any alternative to my problem.

Thanks.

Baz
0
 
LVL 12

Expert Comment

by:Ramkisan Jagtap
ID: 33464211
Hi Baz,
You can use Image mapping concept in this situation.
Please try for it. If I got somthing I will definitely Inform you.

Regards,
Ram
0
 

Author Comment

by:baz86
ID: 33464235
Can you elaborate on wht is image mapping concept?

Is there any way by which I can make Image(tag) act as a container so that it can hold labels?

Regards,
0
 
LVL 12

Expert Comment

by:Ramkisan Jagtap
ID: 33464267
Have you Checked above links?
You can use following features.
Hot spots features
There is no limit on number of hotspots each image may contain.
Each hotspot is characterized by various attributes like shape, location and size.
Overlapping hotspots are perfectly valid.
Hot spots are defined using x and y coordinates.
Hot spots can be assigned Image URL's and are capable of postback.

Different types of hot spots
There are three different types of hot spots offered by ImageMap control. They are:
CircleHotspot
RectangleHotspot
PolygonHotspot

0
 

Author Comment

by:baz86
ID: 33464330
@Ramkisan: Oh oks. Thanks for your suggestion. I ll go through and let you knw. Thanks.
0
 

Author Comment

by:baz86
ID: 33464395
Just found out that in any case you cant place text or labels on those hot spots. Imagemap control(i think) only defines the clickable regions on the imagemap, isnt it?
0
 
LVL 3

Expert Comment

by:raaziq
ID: 33543160
if u r using image mapping u can only use tooltips for the hotspots instead of placing labels on it. anyway try ur luck.
0
 

Author Comment

by:baz86
ID: 33562327
@ raaziq: i am cant use image maps since i cannot add text on the map or on the hotspots. Along with tooltip even text should be visible. Thanks for ur suggestion.

0
 

Accepted Solution

by:
baz86 earned 0 total points
ID: 33562381
Hello experts,

Since there was no other way by which I could find a way to stretch the background image of the panel, I used an external photo editor and manually increased dimensions of the background image. I know this is not a feasible solution in all cases but as a last resort I decided to go for this in my case.

@Ramkisan:- Thank you for all the comments

Regards,
Baz
0
 

Author Closing Comment

by:baz86
ID: 33562410
This was the last but best possible solution I could think for my case. Though this may not be the ideal solution in all the cases.
0

Featured Post

Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

Question has a verified solution.

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

A quick way to get a menu to work on our website, is using the Menu control and assign it to a web.sitemap using SiteMapDataSource. Example of web.sitemap file: (CODE) Sample code to add to the page menu: (CODE) Running the application, we wi…
The ECB site provides FX rates for major currencies since its inception in 1999 in the form of an XML feed. The files have the following format (reducted for brevity) (CODE) There are three files available HERE (http://www.ecb.europa.eu/stats/exch…
Monitoring a network: why having a policy is the best policy? Michael Kulchisky, MCSE, MCSA, MCP, VTSP, VSP, CCSP outlines the enormous benefits of having a policy-based approach when monitoring medium and large networks. Software utilized in this v…
Do you want to know how to make a graph with Microsoft Access? First, create a query with the data for the chart. Then make a blank form and add a chart control. This video also shows how to change what data is displayed on the graph as well as form…

688 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