satimis Posted April 19, 2011 Share Posted April 19, 2011 Hi folks,I have a simple webpage1)webpage: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <style type="text/css" title="Default-Style"> body { background-image: "aaa.png"; background-position: 50% 50%; background-repeat: no-repeat; margin: 15em 5em; font-family: "tahoma", Arial, Helvetica, sans-serif; font-size: 25px; } h1 {color: red;text-align:center;} h2 {color: blue;text-align:center;} h3 {color: green;text-align:center;} </style> <meta http-equiv="Default-Style" content="Default-Style" /> <meta name="generator" content="I am proud to have created my own page from scratch in Notepad." /> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>web site testing!</title> </head> <body> <h1><b><i>Web-Site Under Testing</h1></b></i> <h2><b>Hello To The World</h2></b> </body> </html> It can't work, no background displayed. I must arrange the image as 2) below.2) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <style type="text/css" title="Default-Style"> h1 {color: red;text-align:center;} h2 {color: blue;text-align:center;} h3 {color: green;text-align:center;} </style> <meta http-equiv="Default-Style" content="Default-Style" /> <meta name="generator" content="I am proud to have created my own page from scratch in Notepad." /> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>web site testing!</title> </head> <body> <body background="aaa.png"> <h1><b><i>Web-Site Under Testing</h1></b></i> <h2><b>Hello To The World</h2></b> </body> </html> However I can't control the image position/size/repeat/fixed etc?Please advise. TIAB.R.satimis Link to comment Share on other sites More sharing options...
jeffman Posted April 19, 2011 Share Posted April 19, 2011 Your first instinct was correct. Use CSS instead of old-fashioned presentational attributes in the tag. Here is the correct syntax:background-image: url("aaa.png"); Link to comment Share on other sites More sharing options...
satimis Posted April 19, 2011 Author Share Posted April 19, 2011 Your first instinct was correct. Use CSS instead of old-fashioned presentational attributes in the tag. Here is the correct syntax:background-image: url("aaa.png");Hi,Thanks for your advice. I got it done.Re: backgroud-postion: x% x%;What does it refer? e.g. 30% 50% - what does it mean?TIAWhat will be the syntax for increasing OR reducing the image size?B.R.satimis Link to comment Share on other sites More sharing options...
jeffman Posted April 19, 2011 Share Posted April 19, 2011 Positioning is explained well here: http://www.w3schools.com/css/pr_background-position.aspSimply specifying a height or width rule should change the image size. Link to comment Share on other sites More sharing options...
satimis Posted April 20, 2011 Author Share Posted April 20, 2011 Positioning is explained well here: http://www.w3schools.com/css/pr_background-position.aspSimply specifying a height or width rule should change the image size.Thanks for your advice and link.I still can't resolve how to increase the size of the image.example:The image only covers about 95% of the webpage horizontally leaving a blank margin on both sides. Can I increase its size to cover the complete page with command syntax. OR I have to do it on graphic editing software making it bigger? TIAB.R.satimis Link to comment Share on other sites More sharing options...
jeffman Posted April 20, 2011 Share Posted April 20, 2011 Have you changed the default padding and margins of your document elements to 0? Most developers do that. It looks like this:* {margin: 0;padding: 0;}FWIW, resizing an image on the fly usually looks terrible unless the changes are only a few percentages. It is much more common to use smaller images where they are necessary, and fill the fluid areas with background colors or gradients that blend seamlessly into the images.As to the rest, I gave you a bad answer. There's a better one here: http://webdesign.about.com/od/css3/f/blfaqbgsize.htm Link to comment Share on other sites More sharing options...
satimis Posted April 20, 2011 Author Share Posted April 20, 2011 Have you changed the default padding and margins of your document elements to 0? Most developers do that. It looks like this:* {margin: 0;padding: 0;}Yes. All text went to the top. Image size didn't change. Padding: 0 seemed having no effect.Thanks for your link. I'll try their suggestion later.B.R.satimis Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.