Thursday, November 15, 2012

Answers > How Do I Set a Picture as the Background in an Xhtml File?

How Do I Set a Picture as the Background in an Xhtml File?

by nForms on July 3, 2012

I have done the coding correctly I think. I am actually trying to put it in my CSS file. But even if I am putting the code right in the html file at 100%, it still does not fill the whole browser AND the text is falling BEHIND the picture.
Any clarification would be GREATLY appreciated. :O)

Tags: , , , ,

Similar XForms | XML Posts

{ 4 comments… read them below or add one }

☠ My Bud ☠ September 7, 2011 at 9:34 pm

Background images in CSS 2.1 are not resizeable. CSS 3.0 will address this problem, but CSS 3.0 is only supported in a few browsers and not all the properties are supported even then. There are some CSS tricks to getting an image to fill the browser window:

Background to Fit Screen II: http://paynelessdesigns.pastebin.com/f760990b | http://paynelessdesigns.pastebin.com/VUSbessd
http://www.cssplay.co.uk/layouts/background
http://www.scriptdungeon.com/freejavascript/freescripts1284
http://css-tricks.com/perfect-full-page-background-image/

Background Image Code:

For the body tag example:

body {
width: XXpx;
height: YYpx;
margin: 0 auto;
background: #fff url(image_name.jpg) no-repeat center scroll;
}

That is the proper CSS code for a non-tiled image where the contents scroll with the background image. Change "#fff" to preferred bg color. Change "scroll" to "fixed" if you want page contents to scroll over bg image. Be sure to set proper width/height to provide minimum page size to display bg image. Put the CSS as is on an external CSS file. If using embedded CSS, then place CSS between the style tags and place those style tags between the head tags of the page.

For a tiled image, change to:

body {
width: XXpx;
height: YYpx;
margin: 0 auto;
background: #fff url(image_name.jpg) repeat top left scroll;
}

Put that CSS on an external CSS file if you have more than one page. Put the CSS between the style tags and place them between the head tags if using it on one page. Style another tag other than the body tag if you are using a div wrap container. Should you want the contents of page to scroll over the background image, change "scroll" to "fixed".

Ron

Abhilash E Nair September 7, 2011 at 9:34 pm

i am not able find your exact problem please provide the code you are used i think you used that image inside the table…..

Neneng_Questionaire September 7, 2011 at 9:34 pm

Add this to your CSS…

body {
background-image:
url("putyourpicturehere.jpg");
background-position:center;
background-repeat:no-repeat;
background-attachment:fixed;
}

Go girl!
Experiment and you’ll learn it…

David September 7, 2011 at 9:34 pm

body {background-image: url (‘http://www.yada.com/yada.jpg‘); }

make sure you declare your xhtml file has this at the top:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

Previous post:

Next post: