June 23rd, 2013, 06:17 PM
Background image fits 100%
Hello, I'm trying to make a background-image fit 100% of my background.
What I have is:
My problem is I have content that is more than a page so the user has to scroll down. When they scroll down the image either repeats or there is an empty color.
How can I get the background to fit 100% of my background even with scrolling so that the image stays in place no matter what yet is the size of their screen?
June 24th, 2013, 01:32 AM
Your approaching it the wrong way
Your going to need a div with that exact same styling but with position fixed and a z-index of 1 and make sure this div is seperate of all the other elements
Then with the rest of your elements if you haven't already, surround them in a container div and give this div a z-index of 2
June 24th, 2013, 05:51 PM
jack13580, wouldn't it be simpler to just use "background-attachment:fixed"?
P.S. Welcome to DevShed Forums, Ubercakes.
June 24th, 2013, 07:20 PM
June 24th, 2013, 08:16 PM
The "top" and "left" properties only apply to positioned elements. Also there's not much point in setting "width:100%" on those elements.
I would recommend writing it like this:
background: url(../Images/Background_Html.jpg) fixed;
June 24th, 2013, 10:09 PM
Thanks, that works perfectly.