RASTAA Posted November 30, 2012 Share Posted November 30, 2012 (edited) Hello.I have problem with body width ! Here is my code so can you tell me what to do to fix it : HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Clean WebDesign Studio</title><link href="style.css" rel="stylesheet" type="text/css"/></head><body><div id="container"><div id="header"> </div> <!--KRAJ HEDERA --> <ul id="nav"> <li><a href="#" class="active">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">WORK</a></li> <li><a href="#">BLOG</a></li> <li><a href="#">CONTACT</a></li> </ul> <!--KRAJ NAVIGACIJE--><div id="content"></div> <!--KRAJ SADRZAJA --><div id="tekst1"></div> <!--KRAJ TEKST 1 --><div id="tekst2"></div> <!--KRAJ TEKST 2 --><div id="tekst3"></div> <!--KRAJ TEKST 3 --><div id="footer"></div> <!--KRAJ FOOTERA --> </div><!--KRAJ KONTEJNERA --> </body></html> CSS: /*######################*//*MY PORTFOLIO WEBSITE*//*######################*/html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}/*#################################*/ /*MAIN CSS OF MY WEBSITE*//*##############################*/ #container {background-image:url(images/background.jpg);width:1000px;height:800px;} /*#############################*//*NOT THAT MUCH IMPORTANT CSS*//*############################*/ EDIT: This is just my star of website because i dont wont to go forward with doing something other , because i wont to fix that background ! Thank you very much for your help and be fast please ! Edited November 30, 2012 by RASTAA Link to comment Share on other sites More sharing options...
eTianbun Posted November 30, 2012 Share Posted November 30, 2012 Describe the problem you are facing! Link to comment Share on other sites More sharing options...
RASTAA Posted November 30, 2012 Author Share Posted November 30, 2012 Im facing with problem that there is white area around my container ! Just copy my code into your notepad and youll see ! Link to comment Share on other sites More sharing options...
RASTAA Posted November 30, 2012 Author Share Posted November 30, 2012 Can you help me with this please ? Its urgent ! Thank you very much ! Link to comment Share on other sites More sharing options...
scout1idf Posted December 1, 2012 Share Posted December 1, 2012 Add this...... html, body{height:100%;width:100%;} .... and change this #container {background-image:url(images/background.jpg);width:100%;height:100%;} Link to comment Share on other sites More sharing options...
RASTAA Posted December 1, 2012 Author Share Posted December 1, 2012 (edited) Its kinda good when i type that but my image repats on botom , and when i type background-image:no-repeat; it just go backs to normal i mean there are agin 2 white areas around my container on the right and on the botom ! CSS: /*######################*//*MY PORTFOLIO WEBSITE*//*######################*/html, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}/*#################################*/ /*MAIN CSS OF MY WEBSITE*//*##############################*/body {background-image:url(images/background.jpg); width:100%; height:100% min-height:1px;min-width:1px;margin: 0;padding: 0;}#container {width:1000px;height:800px;}#header {background-image:url(images/header.jpg);height:124px;width:1000px;position:relative;}<!-- NAVIGATION-->#nav {float:right;text-decoration:none;display:inline;}#nav ul {}#nav li {display:inline;text-decoration: none;}#nav a {text-decoration:none;}#nav a:hover{text-transform:lowercase;}#footer {background-image:url(images/footer.jpg);width:1000px;height:71px;}/*#############################*//*NOT THAT MUCH IMPORTANT CSS*//*############################*/ THAt is new css and its still the same thing ! Edited December 1, 2012 by RASTAA Link to comment Share on other sites More sharing options...
DarkxPunk Posted December 2, 2012 Share Posted December 2, 2012 Your background does not stretch... It only repeats or stays its size.Try this if you want to "fake it": http://webdesign.about.com/od/css3/f/blfaqbgsize.htmYou can also make fixed sized backgrounds and have them change using javascript based upon your viewers screen resolutionhttp://www.webdeveloper.com/forum/showthread.php?84188-Change-Background-Image-To-ResolutionHope it helps. Link to comment Share on other sites More sharing options...
RASTAA Posted December 2, 2012 Author Share Posted December 2, 2012 This is not working too.. Someone other can help me ? Link to comment Share on other sites More sharing options...
DarkxPunk Posted December 2, 2012 Share Posted December 2, 2012 Not to sound rude but the two examples I gave you are your only options... Choose one and use it. Otherwise be more clear about what you want to achieve Link to comment Share on other sites More sharing options...
RASTAA Posted December 2, 2012 Author Share Posted December 2, 2012 I will try now that javascript but my problem is that im beginer in this coding itl be litle harsh but nvm ! Il be clearn now : I wont to stretch my container background to full size ! Dont wont to have that white area aroun my background image ! Link to comment Share on other sites More sharing options...
DarkxPunk Posted December 3, 2012 Share Posted December 3, 2012 You can't stretch unless you use one of the two examples I gave you. Thats how it works... Most people don't distort their images just to fill the background. If I could see the picture I could help graphically. Link to comment Share on other sites More sharing options...
RASTAA Posted December 4, 2012 Author Share Posted December 4, 2012 Here you go this is just example fast made and coded website because i dont have much time these days , so if you can help me with it tell me the way and if it is javascript coud you just explain it to me a bit becasuse i didnt stared learing javascript at this time : http://clean-webdesign.com/ Link to comment Share on other sites More sharing options...
DarkxPunk Posted December 5, 2012 Share Posted December 5, 2012 I was just there, no stretching. It actually looks pretty bad on my iPad as a example. Link to comment Share on other sites More sharing options...
dsonesuk Posted December 5, 2012 Share Posted December 5, 2012 Your css contradict what you want? how can background image show full width of browser window when you restrict it to 1000px within container element. Consider using a position fixed element <div id="full_screen_bg"></div> #full_screen_bg {position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-image: url("images/background.jpg"); background-origin: padding-box; background-repeat: no-repeat; background-position: center center; background-size: 100% 100%; z-index: -1;} This will create a background that fills the entire screen whatever size, however it will not scroll, it is fixed to fit browser screen area only. I'm not to sure how you want the header and footer width to act as regards to this so i left it up to you to explain what these elements are supposed to do adjust to screen width or not to match background. Link to comment Share on other sites More sharing options...
RASTAA Posted December 5, 2012 Author Share Posted December 5, 2012 Your css contradict what you want? how can background image show full width of browser window when you restrict it to 1000px within container element. Consider using a position fixed element <div id="full_screen_bg"></div> #full_screen_bg {position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-image: url("images/background.jpg"); background-origin: padding-box; background-repeat: no-repeat; background-position: center center; background-size: 100% 100%; z-index: -1;} This will create a background that fills the entire screen whatever size, however it will not scroll, it is fixed to fit browser screen area only. I'm not to sure how you want the header and footer width to act as regards to this so i left it up to you to explain what these elements are supposed to do adjust to screen width or not to match background. Thank you very much ! It actualy worked ! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now