The Student Room Group
Competition - post a photo you've taken of nature >>
Competition - post a photo you've taken of nature >>
Competition - post a photo you've taken of nature >>

Xhtml and css help needed, 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!
Reply 1
Avatar for Help_Please
Help_Please
OP
Anyone know?
Reply 2
Avatar for MylesXD
MylesXD
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
(edited 13 years ago)
Reply 3
Avatar for Help_Please
Help_Please
OP
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.
Reply 4
Avatar for MylesXD
MylesXD
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? :smile:
Reply 5
Avatar for marek35
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');
}
Reply 6
Avatar for MylesXD
MylesXD
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 :smile: and also OP this should help http://webdesign.about.com/od/css3/f/blfaqbgsize.htm
(edited 13 years ago)
Reply 7
Avatar for Help_Please
Help_Please
OP
Original post by MylesXD
you can do it in the new CSS 3 :smile: 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:
Reply 8
Avatar for marek35
marek35
Original post by MylesXD
you can do it in the new CSS 3 :smile: and also OP this should help http://webdesign.about.com/od/css3/f/blfaqbgsize.htm

Browser friendly?
No.
Reply 9
Avatar for MylesXD
MylesXD
Original post by marek35
Browser friendly?
No.


he asked away 2 do it! :biggrin: didn't ask if ever browser supports it lol
Reply 10
Avatar for syNK
syNK
2
#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.

Quick Reply

Related discussions

Latest

Trending

Trending

Articles for you