Here is the website in question: www.searchingforthereal.com I am fairly new to css and I am having some sizing problems. I am using a photo for the background of this website and along the left hand side I have a .png that I would like to run the entire distance of the background. Now in order to get the background to re-size with the browser properly I have set it up as fallows. #bg { min-height: 100%; min-width: 1300px; width: 100%; height: auto%; position: absolute; top: 0; left: 0; z-index:0; } The bar on the left side of the screen is set up like this: #Layer-2 { position: absolute; left: +114px; top: 0px; width: 171px; height: 100%; z-index: 1; } The problem is that the image will sometimes exceed the size of the browser window. If you scroll when this happens the bottom of the left bar will cut off. It is sizing to the browser window and not the background image. Any ideas would be greatly appreciated.
Your CSS is horrible. #bg { min-height: 100%; min-width: 1300px; width: 100%; height: auto%; position: absolute; top: 0; left: 0; z-index:0; } Code (markup): First you set min-width, after that you are setting width... so min-width won't get applied at all. If you want a fullscreen background image check here: http://xhtml-valid-websites.com/forum/Thread-full-size-background-with-jquery-navigation Check only the CSS part of the demonstration.
My CSS is worse than horrible, most of what I've got so far is trial and error and pure luck. Thanks for the link. I'll try that out.
He did mention he was new, so you can expect it not to be very good. In fact, I would expect that many of the people posting in this section will have less than amazing code, because if it was better, you could expect them to know how to fix it themselves. Learn to code, then learn to code well is kinda of how it goes isn't it?
Well, just to sort it out... Most people think they can learn HTML/CSS in one week or less. That's not correct. It's an ongoing process. Trial-and-error, Google, reading articles, books... that is how you learn. It is easy to come here and ask for solutions, does not matter if it's about CSS or HTML, because most people here will offer a "solution" for free. BUT... why do you need to learn HTML/CSS then if other people will do the work for you? Their "solutions" are in most cases bad HTML/CSS... they do not even know HTML/CSS themselfs... That's how it is, everyone comes here and wants quick, FREE help... but a professional solution. Some people here offer $10 for a fix of their "code", but the "code" itself is crap. So you, if you are good in HTML/CSS, would tell to recode it... For 10$ I do not even send an email, sorry to say. My rate begins at 45 EURO per hour. I know how to code (X)HTML/CSS (and some jQuery)...
Yeah I absolutely agree it isn't a quick learned skill, and it continually gets better with experience. I've "studied" it on and off for two years, not too much before, but in the last few months I've gotten really into it and learned a lot. Actually funny story, I knew nothing about the <span> tag until about a month ago , I saw it used in code and looked it up, and use it all the time now, It makes so many things simple as opposed to completely ugly and complicated. I'm starting Javascript, hoping to eventually move on to more powerful programming languages
#bg { min-height: 100%; min-width: 1300px; width: 100%; height: auto%; <--- why use auto and %? it should be height:auto; or height:%; position: absolute; top: 0; left: 0; z-index:0; }
This is just a typo. I've been trouble shooting this problem for a couple days now and I'm sure there are a couple typos here and there. Thanks though.
I learn best by just experimenting with stuff. I would rather learn on my own than having to ask for help but in this case I feel like I'm banging my head against a wall. The code that I have for this site started out as a PSD project that I converted into a Drupal theme. I've gone through the code and adjusted and tweaked everything that I didn't like. I relize I'm way out of my element with this project. I'm really good with excel formulas and I've done a little programming but unfortunately not much of that transfers to php, css, and java. That's ok though I'll figure it out, I love this kind of stuff. I'm a little confused about you earlier comment though. The page is currently keeping a min-width of 1300px even while it appearing before "width". In your code you listed close to the same thing... img.bg { min-height: 100%; min-width: 1024px; width: 100%; height: auto; position: fixed; top: 0; left: 0; display:none;} Is there a glaring difference between what we did that I'm just not recognizing? I've checked out the css demonstration on that link that you gave me. I actually found this same thing on another site. http://css-tricks.com/perfect-full-page-background-image I tried to get this to work but I've been having problems with it for some reason. This site is a theme for a Drupal template. Am I going to need to alter your code in order to use it in my php document? <img src="background.jpg" class="bg" alt="" width="" height="" /> Code (markup): img.bg { min-height: 100%; min-width: 1024px; width: 100%; height: auto; position: fixed; top: 0; left: 0; display:none;} @media screen and (max-width: 1024px){ img.bg {left: 50%;margin-left: -512px; }} Code (markup):
The demo I showed you is a modified code from http://css-tricks.com/perfect-full-page-background-image Yes I think you need to change the code
Thanks for the help! I got the background to work and got the two bars to do what I wanted. The downloadable code was helpful.