Hey there! Sign in to join this conversationNew here? Join for free
    • Thread Starter
    Offline

    0
    ReputationRep:
    Hello everyone,

    I am trying to create a website via XHTML and CSS. What I want to do is add an image on to my website via CSS. After googling for a abit I have finally got an image to work via CSS.

    body {
    background: url(../xhtml/scroll.gif);
    background-repeat:no-repeat;
    }

    This is what I used in my CSS. Now when I preview the website I see that the image is not big enough. I want the image to be big enough so it looks like a proper background, so I can write it in, if you know what I mean. I do not want the image to be repeated but want it to be big enough so it looks like a proper background.

    Any ideas on how I would go about doing this.

    Thank you for all your help!
    • Thread Starter
    Offline

    0
    ReputationRep:
    Anyone know?
    Offline

    0
    ReputationRep:
    (Original post by Help_Please)
    Hello everyone,

    I am trying to create a website via XHTML and CSS. What I want to do is add an image on to my website via CSS. After googling for a abit I have finally got an image to work via CSS.

    body {
    background: url(../xhtml/scroll.gif);
    background-repeat:no-repeat;
    }

    This is what I used in my CSS. Now when I preview the website I see that the image is not big enough. I want the image to be big enough so it looks like a proper background, so I can write it in, if you know what I mean. I do not want the image to be repeated but want it to be big enough so it looks like a proper background.

    Any ideas on how I would go about doing this.

    Thank you for all your help!
    you can either change the image to match the size of the screen? which would involve using some editing software.

    OR

    use the following code
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    This is done by using DIV tags in the xhtml code, where you import the image
    By setting the width and height to maximum it will stretch the image to match any screen its viewed on
    • Thread Starter
    Offline

    0
    ReputationRep:
    (Original post by MylesXD)
    you can either change the image to match the size of the screen? which would involve using some editing software.

    OR

    use the following code
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    This is done by using DIV tags in the xhtml code, where you import the image
    By setting the width and height to maximum it will stretch the image to match any screen its viewed on
    Cheers, If I did do that, how would I write on the image then? I think ive tried this before and when I used the <p> and write it displays it under the picture.
    Offline

    0
    ReputationRep:
    (Original post by Help_Please)
    Cheers, If I did do that, how would I write on the image then? I think ive tried this before and when I used the <p> and write it displays it under the picture.
    I m confused? i thought u want it as background image, so you would want the text on top the picture, so just poistion on top of the picture? would you like example?
    Offline

    0
    ReputationRep:
    If you want the image stretched through CSS- its not possible (yet). Youll have to add the bg image via css and make it 100% in the html.

    If you want it just as a background image on css try this:

    body
    {
    background-image:url('insertlinkheretoimage ');
    }
    Offline

    0
    ReputationRep:
    (Original post by marek35)
    If you want the image stretched through CSS- its not possible (yet). Youll have to add the bg image via css and make it 100% in the html.

    If you want it just as a background image on css try this:

    body
    {
    background-image:url('insertlinkheretoimage ');
    }
    you can do it in the new CSS 3 and also OP this should help http://webdesign.about.com/od/css3/f/blfaqbgsize.htm
    • Thread Starter
    Offline

    0
    ReputationRep:
    (Original post by MylesXD)
    you can do it in the new CSS 3 and also OP this should help http://webdesign.about.com/od/css3/f/blfaqbgsize.htm
    It looks really complex lol, I might just scrap that idea. Cheers for your help mate :yy::yy:
    Offline

    0
    ReputationRep:
    (Original post by MylesXD)
    you can do it in the new CSS 3 and also OP this should help http://webdesign.about.com/od/css3/f/blfaqbgsize.htm
    Browser friendly?
    No.
    Offline

    0
    ReputationRep:
    (Original post by marek35)
    Browser friendly?
    No.
    he asked away 2 do it! didn't ask if ever browser supports it lol
    Offline

    0
    ReputationRep:
    #bg
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    Don't do the resizing thing, as it will only fit and look right on certain resolutions, this is the way to do it.
 
 
 
  • See more of what you like on The Student Room

    You can personalise what you see on TSR. Tell us a little about yourself to get started.

  • Poll
    Did TEF Bronze Award affect your UCAS choices?
  • See more of what you like on The Student Room

    You can personalise what you see on TSR. Tell us a little about yourself to get started.

  • The Student Room, Get Revising and Marked by Teachers are trading names of The Student Room Group Ltd.

    Register Number: 04666380 (England and Wales), VAT No. 806 8067 22 Registered Office: International House, Queens Road, Brighton, BN1 3XE

    Quick reply
    Reputation gems: You get these gems as you gain rep from other members for making good contributions and giving helpful advice.