#background {
background-attachment: fixed;
background-image: url(img/background.png);
background-repeat: no-repeat;
background-position: right bottom;
overflow: hidden;
position: absolute;
right: 0px;
background-color: #CCC;
height: 100%;
width: 100%;
margin-bottom: 10%;
}
I seem to have forgotten CSS.
Started by SpleenBeGone, Aug 13 2012 12:16 PM
9 replies to this topic
#1
SpleenBeGone
-
- Administrators
-
- 14,951 posts
Deer Leader of the Goriest Revolution
- LocationHouston
Posted 13 August 2012 - 12:16 PM
I'm trying to get an image to start 10% from the bottom of a page, and I can't seem to make it work. Here's the code:
#2
Rejected
-
- Banned
- 453 posts
Megabyte
- Locationhttp://www.crackhackforum.com/user-54122.html
Posted 13 August 2012 - 02:15 PM
sorry, idk css, cant help you 
#3
SpleenBeGone
-
- Administrators
-
- 14,951 posts
Deer Leader of the Goriest Revolution
- LocationHouston
Posted 13 August 2012 - 02:17 PM
No worries. I know there's a few people here that do.
#4
Guest_ElatedOwl_*
Guest_ElatedOwl_*
-
- Guests
Posted 13 August 2012 - 03:46 PM
May I ask the reason? I assume you've got a 10% footer and want the background image to be above the footer, yes?
#5
SpleenBeGone
-
- Administrators
-
- 14,951 posts
Deer Leader of the Goriest Revolution
- LocationHouston
Posted 13 August 2012 - 03:48 PM
Yep.
#6
Guest_ElatedOwl_*
Guest_ElatedOwl_*
-
- Guests
Posted 13 August 2012 - 04:00 PM
I think you'd have to split it across multiple divs and put the background on the content div or give the footer a fixed height. I'm assuming you want a sticky footer based on the layout you posted before, when I get home (leaving now) I can be a little more specific
#7
SpleenBeGone
-
- Administrators
-
- 14,951 posts
Deer Leader of the Goriest Revolution
- LocationHouston
Posted 13 August 2012 - 04:24 PM
If I'm understanding right, that's what I'm already doing, here's the footer div.
#bottom_bar {
background-color: #000;
height: 10%;
width: 100%;
left: 0px;
bottom: 0px;
position: absolute;
top: auto;
padding-top: 0%;
padding-right: 0%;
padding-bottom: 0%;
padding-left: 0%;
margin-top: 90%;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
right: 0px;
#8
Guest_ElatedOwl_*
Guest_ElatedOwl_*
-
- Guests
Posted 13 August 2012 - 05:37 PM
The way you would normally do it (with a fixed height) is setting the min height of a wrapper to 100% and setting it's bottom margin to the negative height of the footer. The only problem with a fluid height is that % margins are based off of the parents width, even for margin top and bottom. (see http://www.w3.org/TR...rgin-properties)
You could used a fixed height and then onload for javascript calculate the heights you need to use if you are really set on the 10%.
You could used a fixed height and then onload for javascript calculate the heights you need to use if you are really set on the 10%.
#9
SpleenBeGone
-
- Administrators
-
- 14,951 posts
Deer Leader of the Goriest Revolution
- LocationHouston
Posted 13 August 2012 - 05:41 PM
I'll give it a try when I go back to working on it tomorrow. I remember having this problem a long time ago when I was doing a site, and I think your method was how I worked around it.
#10
Chrissaysay
-
- Members
-
- 452 posts
Megabyte
Posted 13 August 2012 - 06:18 PM
Could you not just make the height of the div containing the background 90% ? I assume you want it to fill everything but the 10% at the bottom that will have your footer content. I don't know too much about CSS/Web Design, but I have dabbled some and doing it like that makes sense to me. Lol, I could be completely off though XP Just wanted to put in my two cents. Lemme know how you eventually work this out 
