SA Developer .NET

Welcome to SA Developer .NET Sign in | Join | Help
in Search

Stretching My Background

Last post 10-14-2008, 12:55 by Orikuuido. 9 replies.
Sort Posts: Previous Next
  •  07-23-2008, 18:15 13625

    Stretching My Background

    I've got a background image for my site, but the problem is it only has a resolution of, let's say 1024 by 768. Now, if I use the following CSS

     body {

    background-image: url('..images/background.png');

    background-attachment: fixed;

    background-position: center center;

    background-repeat: no-repeat;

    }

    it works beautifully, until I view the page in a resolution higher than that of the picture. How can I stretch my image with CSS?


    I'm going to regret forging this...
  •  07-24-2008, 9:05 13632 in reply to 13625

    Re: Stretching My Background

    Stretched images don't look nice.  Why not make your background the same colour as your background's background, so you don't see where it ends, and just centre it?

    Unscrambling Eggs: Decompiling ASP.NET
  •  07-24-2008, 9:51 13633 in reply to 13632

    Re: Stretching My Background

    ProfK,

    I would, but in terms of having multiple colours on my background-image? I can never find the perfect medium, so there are instances when I need to stretch. I should be studying, but I find asking people far easier. We are all objective, and get far more learning done together.


    I'm going to regret forging this...
  •  07-25-2008, 16:49 13706 in reply to 13625

    Re: Stretching My Background

    Is it a background that can be repeated horizontally?

    If so, it's as simple as:

    body {
    ...
    background-repeat: repeat-x;
    ...
    }

  •  07-25-2008, 17:12 13707 in reply to 13706

    Re: Stretching My Background

    No, I wan't to have an image stretch across my screen, stay fixed and not repeat. If you have a look at the image on http://www.sagamedev.com you'll notice the image, but the problem is they have a common color to refer to for the background-color.
    I'm going to regret forging this...
  •  07-25-2008, 17:19 13708 in reply to 13707

    Re: Stretching My Background

    Orikuuido:
    No, I wan't to have an image stretch across my screen, stay fixed and not repeat. If you have a look at the image on http://www.sagamedev.com you'll notice the image, but the problem is they have a common color to refer to for the background-color.
    You talking about http://www.sagamedev.com/images/common/sagd_back.gif or http://www.sagamedev.com/images/common/sagdtitle.jpg? Their background image sits suspended in the center of the page - I missed it until I knew what to look for.
  •  07-25-2008, 17:27 13711 in reply to 13707

    Re: Stretching My Background

    Apologies for the double quote, but I wanted to make it clear that the previous post is a question, and this a possible answer.

    Check out this page for a possible solution: http://www.htmlite.com/faq022.php

  •  09-23-2008, 14:04 14948 in reply to 13711

    Re: Stretching My Background

    I found that if I create a fixed position div, with a height of 100% and width of 100% you can just add the image in and set its width and height to 100% too, but make sure you set the z-index to -1 or something to prevent an overlap and locking of you screen

    I'm going to regret forging this...
  •  09-23-2008, 19:23 14959 in reply to 14948

    Re: Stretching My Background

    Out of interest sake....What is the size in kilobytes of the image?

    But for my 2 cents worth, always try and use a image with a edge colour than can be matched with a background.


    What not...if not.

    Software is never finished and can always be improved.
  •  10-14-2008, 12:55 15225 in reply to 14959

    Re: Stretching My Background

    Hi mjohl.inox,

    I understand what you are saying now, and decided against using stretched images, as I tend to forget about converting them and land up with huge PNG files that leave people wondering what they are doing here, and it chows my bandwidth too.

     Anyway, I got my design issues sorted out almost 100% now, but the backend is killing me.  Thanks though.


    I'm going to regret forging this...
View as RSS news feed in XML
Powered by Community Server (Commercial Edition), by Telligent Systems