×

Discussion Board

Results 1 to 4 of 4
  1. #1
    Registered User
    Join Date
    Oct 2011
    Posts
    6

    No CSS background-image on S40?

    Anyone got background images for DIVs working? The "background-image(url...)" thing in CSS?

    I just don't get it. The background-image(url...) construct in a CSS does *not* display the image for me (neither in a web app, nor on a web page I load directly from the web). - I'm not sure, however, if the CSS property is completely ignored: In one case I see the background becoming blue when the image is mainly blue... in some cases, it's just like there's nothing at all.

    So is it something in the CSS S40 is picky about? Or does it only accept certain image formats as backgrounds? Is there any working example that I could have a look at?

  2. #2
    Nokia Developer Expert
    Join Date
    Jun 2008
    Location
    Tampere
    Posts
    833

    Re: No CSS background-image on S40?

    Hi,

    What format are you trying to use and do you have anything special in it? (transparency, very large or very small image etc..)

    I tested with a couple of images and they worked OK.
    For example
    Code:
    background-image: url('http://www.developer.nokia.com/Community/Piazza/images/Discussion-Icon.png');
    Br,
    Ilkka

  3. #3
    Registered User
    Join Date
    Oct 2011
    Posts
    6

    Re: No CSS background-image on S40?

    Ilkka, I guess I know what's going on: I had assumed that for simply prototyping the UI (HTML+CSS, no Javascript), I could edit a file directly on a web server and retrieve it with the Ovi browser on my C2-01, thus bypassing the problems of the web app simulator. I had thought rendering of HTML+CSS would follow the same rules (and restrictions) in both S40 WebApps and normal web pages. This doesn't seem to be the case.

    The code I have works fine now as a web app (even though on the phone the background image gets squeezed to half of its height [1] - must find out why, doesn't happen in the simulator), while it still doesn't display the background images when opened as a normal web page. (Which seems to be by design, other public web pages miss the background images, too.)

    OTOH, I found that a web page may safely include things like "float: left" - which are dropped in the web app.

    Lessons learned: Don't build user interfaces this way. Use the simulator.

    (I cannot recall what exactly made me write "...neither in a web app, nor on a web page..." in my original posting. The only thing I can imagine is that I never actually tested on the phone itself, but relied on the simulator. I upgraded the simulator to its new version meanwhile, so maybe the old one reacted differently.)

    [1] Solved this one, too: background images are forced to the width- and height-values of the container. In doing so, the padding-values are ignored. So a DIV with an actual width of 220px (width: 200px plus padding left/right set to 10px, respectively) and an actual height of 50px (height 30px an padding top/bottom 10px, again) gets a background image that's 200x30 in size, no matter what the actual image size really is. The image is located on the top left (the start of the padding area). This doesn't happen in the simulator, where the actual image size is used rather than the container size.

    To work around this issue, I simply embedded the DIV into another one without any padding and attached the background image to the outer DIV. Happy now.
    Last edited by ossi1967; 2011-11-05 at 14:45.

  4. #4
    Nokia Developer Expert
    Join Date
    Jun 2008
    Location
    Tampere
    Posts
    833

    Re: No CSS background-image on S40?

    Hi,

    Indeed, images served to the device are scaled to fit device screen. However this won't happen in simulator. We are working to get this mismatch fixed so that the simulator preview would be more accurate match to real device.

    Thank you for sharing your experiences on div background image scaling behavior
    I was able to reproduce this issue and filed a bug report.

    Br,
    Ilkka

Similar Threads

  1. on device N-97 background image get disappear or get black background
    By amitsharma_ujj in forum [Archived] Qt Mobility Project
    Replies: 13
    Last Post: 2011-05-06, 08:05
  2. How to draw image over the background image
    By amit04.kumar in forum Symbian Media (Closed)
    Replies: 5
    Last Post: 2010-09-15, 16:15
  3. display movable image on a background image
    By darshan.gandhi in forum Symbian Media (Closed)
    Replies: 2
    Last Post: 2010-07-22, 09:30
  4. problem in display an image button on canvas(Background image)
    By mramin05 in forum Mobile Java Media (Graphics & Sounds)
    Replies: 3
    Last Post: 2008-11-12, 04:51
  5. Replies: 4
    Last Post: 2006-12-14, 12:33

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
×