Background image: Size to fit, bottom of page not screen

I have an image that is 1200x500. I want it on the bottom of the page, not the screen (so on a long page you won't be able to see the image unless you scroll down).

I'd like it to stretch to fit the width of the screen, but maintain aspect ratio if possible. (I've read this can only be done using <img> not CSS.

Currently using the bg style, I have the image in the background, but its at the top of the screen. (so you see it at all times).

The body style, has the image initially at bottom of the screen, and when you scroll down, it stay up.

The image is not suitable for tiling.
/*In the CSS File*/
body {height:100% margin:5px 0; padding:0; font: 74% Arial, Sans-Serif; color:#000; line-height: 1.8em; background : #3a7de6;
 
/*I want it to be at the bottom of the page, not screen., would also be good if it could be zoomed (proportional stretch)to full width*/
background-image:url('images/BckGrnd.jpg');
background-repeat:no-repeat;
background-attachment:scroll;
background-position:bottom;
}
.bg {background: #3c80eb;
position:fixed;
width:"100%";
float: bottom;
}
 
/*In the HTML File*/
<body>
<div class="bg"><img src="images/BckGrnd.jpg" width="100%" alt="" /></div>
<div class="content">
...

Open in new window

LVL 13
RyanProject Engineer, ElectricalAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

quincydudeCommented:
What about adding a Div at the bottom of you page and assign the background style to that div only?
Something like

/*In the CSS File*/
body {height:100% margin:5px 0; padding:0; font: 74% Arial, Sans-Serif; color:#000; line-height: 1.8em; background : #3a7de6;
 }
 
/*I want it to be at the bottom of the page, not screen., would also be good if it could be zoomed (proportional stretch)to full width*/
 
.footer
{
background-image:url('images/BckGrnd.jpg');
background-repeat:no-repeat;
background-attachment:scroll;
background-position:bottom;
}
.bg {background: #3c80eb;
position:fixed;
width:"100%";
float: bottom;
}
 
/*In the HTML File*/
<body>
<div class="bg"><img src="images/BckGrnd.jpg" width="100%" alt="" /></div>
<div class="content">
...
<div class="footer">
...

Open in new window

0
RyanProject Engineer, ElectricalAuthor Commented:
If I just use the background image property from CSS, and put the footer after content, before end of body, nothing shows up.

If I put an <img> in the footer, its almost what i need, except the image is after the content (effectively, its not behind the content, but below it-extending my page)
0
RyanProject Engineer, ElectricalAuthor Commented:
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

quincydudeCommented:
Have you tried setting the size of the footer div explicitly? As browser may not render the div if no content is in it.
0
RyanProject Engineer, ElectricalAuthor Commented:
When I set the footer height to 500px; width to 100%, it shows up at the top.
Height 100%, width 100% doesn't show up at all.
0
quincydudeCommented:
Sorry I got what you mean now. This should work fine
 

<html>
<head>
<style>
/*In the CSS File*/
body {height:2000px; margin:5px 0; padding:0; font: 74% Arial, Sans-Serif; color:#000; line-height: 1.8em; background : #3a7de6;
 
/*I want it to be at the bottom of the page, not screen., would also be good if it could be zoomed (proportional stretch)to full width*/
background-image:url('images/BckGrnd.jpg');
background-repeat:no-repeat;
background-attachment:scroll;
background-position:bottom;
background-attachment:fixed;
}
 
 
</style>
</head>
 
<body>
 
<div class="content">
.........
</div>
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
RyanProject Engineer, ElectricalAuthor Commented:
You have the attachment as fixed and scroll.

Doing this with scroll put the image at the bottom center of screen, and stayed at the top of the page.

Setting body height to 100% put it back at the bottom.
0
quincydudeCommented:
My mistake, remove the background-attachment:scroll;
 should be alright.
0
RyanProject Engineer, ElectricalAuthor Commented:
Ultimately this was the solution.
body {height:100% margin:5px 0; 
background : #3a7de6;
background-image: url(images/bckgrnd.jpg);  
background-position: bottom; 
background-repeat: no-repeat;
}

Open in new window

0
RyanProject Engineer, ElectricalAuthor Commented:
1 Line too many. Just had to removed Fixed and it was fixed :p
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.