danhodge Posted August 29, 2011 Report Share Posted August 29, 2011 Having that problem that always seems to pop up for me - the background image. This is the link: http://potatoes.netne.net/ If you are viewing this on a fairly big monitor, on a desktop computer, you will see something along the lines of this at the bottom: If you are viewing it on a laptop, there is a massive white gap. This is caused by a 'margin-bottom: -400px;' i had to put in, since there is no height on the image (i did this to solve the same problem im already having, and hit a brick wall). What i would like to know is, is there a way of making the background image stretch vertically but not horizontally? If not, can anyone look at the code/website and see if there is any way i can get rid of the white space, without removing any text, or editing the photo's size again? The background image is saved on Adobe Fireworks, so it has layers i can edit if you think that will help, but it will make the image look a lot worse... Thanks a lot! Danny Quote Link to comment Share on other sites More sharing options...
Wickham Posted August 30, 2011 Report Share Posted August 30, 2011 (edited) This is the best I can do:- CSS edits:- body { /* delete all background image code*/ } .background { display: block; position: fixed; left: 0; right: 0; bottom: 0; top: 0; width: 100%; height: 100%; z-index: -1; } HTML markup:- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> BakedWell </title> <link rel="stylesheet" type="text/css" href="style.css"/> <!--[if lt ie 7]> <style type="text/css"> .background { position: absolute; } /*this is because IE lt (less than) IE7 don't process position: fixed*/ </style> <![endif]--> </head> <body> <img class="background" src="images/sky.jpg" alt="Sky"> <!--this has been added--> <div id='website'> <div id='title'> <h1>BakedWell</h1> </div> <div id='navbar'> <ul> <li><a href="index.html">Home</a></li> <li><a href="menu.html">Menus</a></li> <li><a href="cont.html">Contact</a></li> </ul> </div> <div id='text1'> <h2>About BakedWell</h2> <p>BakedWell is a small, family run, mobile catering oven unit, ideal for all celebrations, from parties to weddings. We can cater for all. </p> <p>We mainly specialise in hog Roast, and baked potatoes, but can cater for other needs. Please look under the 'Menu' tab for other options.</p> <p> We use all the best quality ingredients, and where possible use free range meats and vegetables. </p> <p> We can come to where ever the party/event is, as our oven is mobile, and sets up a stand next to the oven, shown in the picture to the right. </p> <p> Our service involves us coming prior to guest set up, serve, close down, tidy up and making sure we don't leave until everyone is full. </p> </div> <div id='footer'> </div> </body> </html> <!-- www.000webhost.com Analytics Code --> <script type="text/javascript" src="http://analytics.hosting24.com/count.php"></script> <noscript><a href="http://www.hosting24.com/"><img src="http://analytics.hosting24.com/count.php" alt="web hosting" /></a></noscript> <!-- End Of Analytics Code --> Edited August 30, 2011 by Wickham Quote Link to comment Share on other sites More sharing options...
danhodge Posted August 30, 2011 Author Report Share Posted August 30, 2011 But using that make the background fixed, yet the text boxes still scroll... Do i need to change the size of the text boxes, or make them fixed? Also, i have 2 versions going trying to fix the problem, and on the same link, i have made the textboxes fit in the right places, and everything else, i just have a white space of about 300 - 500 pixels (guessing) at the bottom of the page on a laptop sized monitor. How unprofessional would this look to anyone actually looking at the website do you think? I wont be using this website on my portfolio unless i find a way of getting rid of that white space, but im not sure how it would look to someone who just wants a caterer... Thanks a lot for your help so far, but i think my image is about 1600px in height, so fitting the screen exactly actually squashes it down (which was my mistake, i didn't think that one through). Quote Link to comment Share on other sites More sharing options...
falkencreative Posted August 31, 2011 Report Share Posted August 31, 2011 One thing to keep in mind... Your website will be displayed in a variety of dimensions, from small on a smart phone to a huge 20+ inch monitor. Creating a website that adapts to each size is a bit of a pain, and (at least in my opinion) may be a bit of a wasted effort to get things pixel perfect. I try to stay away from designing fluid sites that adapt to the screen size due to the huge number of variables you have to adapt for. Quote Link to comment Share on other sites More sharing options...
danhodge Posted September 1, 2011 Author Report Share Posted September 1, 2011 Well, my monitor is 1600 by 1000 pixels, so if it works on that size properly, would you say that is the best optimization? I think i remember someone showing me a link on here about the average of what monitors people use, and since i have the average size, thats okay right? Quote Link to comment Share on other sites More sharing options...
Andrea Posted September 1, 2011 Report Share Posted September 1, 2011 http://www.w3schools.com/browsers/browsers_resolution_higher.asp - the other 14% view at lower resolution. So if you'd prepare it for 1600, you would not address the majority. However, the statistics that W3S collects here may not be what the visitors of your site have, either. But in addition to figuring out how you can do what you're working on, maybe it'd be good to take a step back and ask if you even should. Now, this is strictly personal opinion and highly subjective. And I really mean this as constructive criticism, not an insult or something like it, but I don't like that site at all. It looks so 1995 - teenager working with FrontPage. Just outdated and clumsy. When I open your site, first I see the text and it takes a noticeable amount of time before this gigantic background picture even pops up. I see about half a monitor of white under the grass and 'baked 'well' runs out of its background into the picture of the cart. The design is overpowered by this gigantic tree or pole or whatever it is, and what the site is actually about appears as a - in comparison - very tiny photo. Again - I know it's my subjective personal opinion and a matter of taste, but somehow I don't think I'm the only one that feels this way. My best advice to you is - start over with a whole new design. I'd think you can do something with that cart. Use the top as a header image with the name, the wheels part for the footer, and a repeat background for the middle with the cart color that grows to whatever height your content requires. Just a thought.... And no clouds, either.......... Quote Link to comment Share on other sites More sharing options...
danhodge Posted September 1, 2011 Author Report Share Posted September 1, 2011 Well, the thing is - i totally agree with you, and creating a website purely through graphics was like my worst nightmare, however the client asked for this exact design - sky background, wood for the center bit, grass at the bottom, and some kind of plants around the wood. So although website designers are supposed to make it look good for the viewers, the clients views are still more important - since thats who is paying me, right? And i wont be using this in a portfolio, so that isn't really an issue either... Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.