Scaleable background image in div with set height
- Started
- Last post
- 5 Responses
- besler
I need to put a background image on a site I'm working on that will have a set height of 430px. I currently have it stretching horizontally, but I'd like it to scale proportionately within that 430px window.
Does anyone have any ideas or links on how I can go about doing this?
- raf0
http://www.alistapart.com/articl…
There are good links to other solutions there
- besler0
Thanks. RIght now I'm using flexibg.js, and while it does what it's supposed to, it's not meant to fit inside a certain element. I basically need the image to grow across the screen horizontally, but i want the vertical portion that grows to be chopped off so the image isn't stretched, and that my content can stay split beneath the image.
- Continuity0
There's also this from QBN's very own foobaz (it's a jQuery solution):
- monNom0
I believe there's a css only solution.
[div][img][/div]
div {width: 100%; height: 430px; overflow: hidden;}
div img {width:100%;}untested but you ge tthe idea.
set the position to absolute, then your site container position to absolute so they overlap.