ansaurus

Question

Display an image of 1920x1170 / 183KB as BG using CSS

Answer 1

A:

Your CSS is incomplete, and you probably should set the image as background image (not sure, you're not giving more detail about your situation). Try

.bground{
      height:auto;
      left:0;
      position:fixed;
      top:0;
      bottom: 0;
      right: 0;
      background-image: url(Untitled-2.jpg);
      background-position: left top; /* Adjust to liking */
      background-repeat: no-repeat;
   }

<div class="bground">
&nbsp;
</div>

Pekka 2010-07-15 07:16:14

Display is the same.

Jean 2010-07-15 07:19:29

@Jean can you add a screen shot or live link to your question? Also, your screen resolution is 1920 x 1170 Pixels or more, right?

Pekka 2010-07-15 07:21:03

Any way to upload the image here, so you get the feel of what I am trying to say

Jean 2010-07-15 07:21:45

@Jean not here directly, no... Do you want to *scale* the image to your screen size?

Pekka 2010-07-15 07:22:24

@pekka, yes I want to according to screenszie 15.6" or 26".

Jean 2010-07-15 07:24:07

Answer 2

A:

hmtl, body { height: 100%; width: 100% }
.bground {
    width: 100%;
    height: 100%;
    background: url(Untitled-2.jpg) no-repeat center center;
}

<div class="bground">
</div>

Your image was probably cut because <html> was not taking all the screen space.

Razor 2010-07-15 07:21:41

I tried with html height 100% and width:100% does not work

Jean 2010-07-15 07:34:11

You have to add height and width to HTML and BODY too.I verified and it works, so if it doesn't for you, then there's another problem and you should give us more details.A live page would be best.

Razor 2010-07-15 07:45:58

The image is 1920x1170px, and using your code, the image is not displayed either

Jean 2010-07-15 07:55:16

Answer 3

A:

hmtl, body { height: 100%; width: 100% } .bground { width: 100%; height: 100%; background: url(Untitled-2.jpg) no-repeat center center; }

this is right answer .........

Prashant 2010-07-15 07:27:12

Its not the right answer, try the code yourself.

Jean 2010-07-15 07:32:26

Answer 4

+3 A:

You can use CSS3 media queries to scale background images: http://www.alistapart.com/articles/supersize-that-background-please/

kingjeffrey 2010-07-15 08:27:43

The linked article also mentions a couple of workarounds using the `img` tag for older browsers.

devstuff 2010-07-15 08:46:59

+1 Nice article

What 2010-07-15 09:49:54

ansaurus

tags:

views:

answers:

Display an image of 1920x1170 / 183KB as BG using CSS

related questions