His background is perfect!

[beeldspraak]

Hi, i was just browsing the forum for help and came accross yet another, but PERFECT EXAMPLE of what I want to achieve, yet can not!! It was this post……

""""Help making width of page 100%"""
and this website: http://www.fountain-city.com/beta/section/links

Even with his code my background falls short, does not move and is a complete mess. I just divided the background up into three parts: Two photos and one gradient. I put the gradient into the body element and made two seperate divs: Body#photo1 and body#photo2, also under the body element. But even here I can not get them to work (this bit probably due to lack of understanding). but originally it was all one png as a background.

So to keep it simple, how does this person’s perfect website get his background to behave really properly? I simply do not understand it. Someone please show me how it should be correctly coded.

[AshtonSanders]

First off, try reverse engineering. Copy his code or use Firebug to edit his code and fiddle with what he has done. It really isn’t that complicated.

Secondly, read this:

"beeldspraak" wrote:

made two seperate divs: Body#photo1 and body#photo2, also under the body element.

You said you made "divs" and them you wrote "Body#photo1" and "body#photo2" I’m hoping you were just being sloppy, and forgot the spaces.

Thirdly, I can’t really help you much more than that without seeing what you have done. Do you have a link or code you can show us?

But again, I would recommend looking at his code and figuring out what he did.

[beeldspraak]

No I did not forget the spaces, I meant to say body id’s. not exactly divs. But then I might be wrong here as well. I have spent weeks on firebug and have learned one thing, no one does it the same. But I know there are rules, point is his code does not work simply because he must have other coding that I am not aware of. It’s not that simple when trying to discover and learn css by looking at firebug. My previous topic: "background image the background contained the original question. All I want to know is, how do you set a background that adjusts with the size of the browser, no horizontal scroll bars, and if I make it say 1400 px wide (the width of my scrreen), how do I code to guarrantee that other users will see a complete background on their browser so long as it is above the 800 width. This is the issue that is missing in ALL books on css and html, no one speaks about it, hence my frustration. And the answer is not in firebug because there is a lack of consisitency, different pixel dimensions which will affect how the person has decided to code. He might have even divided up his background as some do. It’s not that easy. Otherwise I would not have posted that question here.

Thanks.

[james.davis]

Here is Chris’ example on full backgrounds.

https://css-tricks.com/perfect-full-page … und-image/

[beeldspraak]

Thankyou James, I tried this on one page I did but it failed, again I think that the rest of my css code probably fouled it up because I inserted chris’s code afterwards. I was looking at a book today and came accross adding pixel dimensions mixed with percentage in the body, and then another article that said it was not really adviseable to have three images as a background. But there were diffrent codes for getting flexible webpages. So obviously it is not straight forward. Guess I will just plug on…

I’m too new to all this so probably I am going for something too complicated at the moment.

[james.davis]

I actually just used this technique on my current project. I have had many headaches over the past few days. Just keep plugging away. The times I get stuck is where I learn the most. I sorry I couldn’t provide any added value, I myself am new to the game. If I come across anything in my searches I will definitely keep you in mind. Try Nettuts.com I have found them to be a great resource as well.

[beeldspraak]

Hi James , thankyou for the link. I have so many resources it’s unbelievable what you can collect. I have been going through some really good sites and viweing them in firebug, it does seem that a lot of people wrap their images in divs and keep the background only for the gradient. They then position those divs? and they become part of the background as intended. It also seems quite common that people do not place photos or images as part of the body element, rather they have cut them away from the background in photoshop (which I kinda figured out was my only solution to the problem anyway) and placed them. I also keep coming accross people who who either do a BODY or a BODY id= "home", this bit I do not understand, why replace a body element with a body id instead? made no sense to me.

All in all, you are right, keep experimenting. there seems to be no simple way to place a background image because they vary in design and require the browser to beahve differently and I made a bit of ‘not so simple’ background design that has particular reqirements to stay in acertain position. I wish I had gone for the straight forward three column layout with a colour background – but that is too boring, it’s my creativity that complicates my learning, not the technical stuff although that is somewhat lacking I know.

thanks for your help and conversation anyway.

[james.davis]

Glad I could be of some help. I cannot speak for everyone but I put the "id" on the body to specify the current page for my menu. This is totally of the topic of this post… I know. Some people put the class=current on the actual menu item to mark the active state. Since I use include statements for my menu. I put an "id" on the body to mark the active state for my menu. I hope I am explaining this clearly. Ok back on topic… I do hope you find a solution. If so, please share it with us because I am definitely curious to see this effect.

[Author]

Posts