Jump to content
Stef's Coding Community
Sign in to follow this  
danhodge

Background image

Recommended Posts

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:

beyal3.jpg

 

 

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

Share this post


Link to post
Share on other sites

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 by Wickham

Share this post


Link to post
Share on other sites

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).

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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..........

Share this post


Link to post
Share on other sites

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...

Share this post


Link to post
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...