Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 4438
  • Last Modified:

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

0
Ryan
Asked:
Ryan
  • 6
  • 4
1 Solution
 
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 6
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now