Because I basically suck at coding a sweet background to use as website background, I naturally result to Photoshop to design the image…but I get stuck at this question: “Ok, so how exactly am I going to put this image in the background and make it so it doesn’t look cropped, leaving white space around the image?” If you’ve ever created or wanted to create a website using a static image, you’ve asked yourself this question.
After hours of Google searching, I found all sorts of ways to do this. You can call jQuery OR use the advanced, not yet implemented techniques of CSS3 and place parts of the image at different corners of the page (Safari is the only browser that can use CSS3 currently). I tried the CSS3 procedure, which was basically separating different image urls by a comma @ the body tag and defining their location. This is where I learned that designing a website in Safari is really not the best choice since it’s that must more advanced than what everyone else is using. So more searching brought me to a little German website (http://www.younic.de/) where I found THE trick, and, amazingly, it was about the only article on the site that’s in English.
Scaling body background images with pure CSS describes a SUPER easy way to add any image to your website’s background by placing this code after the <body> tag (without the first and last quotation marks):
"<style type="text/css">
#background
{
width:100%; height:100%; position: absolute; z-index: -1; top: 0; left:0;
}
</style>
</head>
<body>
<img id="background" src="yourbackgroundimage.jpg"/>"
In WordPress, your <body> tag is in the header file.
One thing I noticed about this code is that you might have to change “position: absolute” to position:fixed” if your website/background doesn’t operate correctly. Note that your image may be stretched to fit the widescreen displays if its not made for WS already. Check out where I’m currently using this.
[...] tech4eleven.com y agregados [...]
Hi there! Glad to see that you could use this little piece of css
Cheers, nicole
“Safari is the only browser that can use CSS3 currently”
- a bad choice. CSS3 is still in the works. So, if you can understand >> the standard itself is not ready and will take some time until that – so what’s your complaint ??. Everyone implement things they think is better for them and their clients.
“This is where I learned that designing a website in Safari is really not the best choice since it’s that must more advanced than what everyone else is using”
- as a webdesigner I can told you – do not try to design for Safari if you are a corporate designer – he has a low public so far, low visibility and in industry small numbers can not make the rule – a corporations will ignore this option (to build for Safari). Firefox and IE = corporate target for webdesigners. If you are a MAC fan then you can do what you want with no problems but please dont tell others that Safari is advanced just because they implement other CSS3 specifications than others. In many aspects Chrome is better than Safari, Firefox ..what I have to say, is much much better(as a whole, functions and features, etc). Mozilla implement CSS3 specifications from version 3, but from 3.1 the support become OK.. Should I say Opera ? – yes from 9.5.
Btw. I bet you don’t check Konqueror from KDE before you make your affirmation.
Read what CSS3 developers think [in 2007] >>> http://www.css3.info/khtml-356-is-the-most-css3-compliant-of-all/
Konqueror is the most CSS3 advanced browser (KHTML is Konqueror core).
In future, work carefully with your affirmations or else you will give the picture of an ultra noob.
Aout “the best browser in the Universe”, Safari constantly crash in Windows especially with Flash Player – beside that – as a bad habit – they can not restore pages / tabs after crash. Chrome can do that, Opera can do, Firefox can do [ without other manipulations - without touching History - just restarting browsers. ] as far I can see Safari can’t restore lost tabs after crash. Probably in MAC Safari is best of bread but in WIndows I’m sorry for him. Read please reviews on the net…
@Nemes Ioan Sorin
thanks for your OPINION. what i write is that as well, MY opinion. never do i write anything as doctrine or a must. I am entitled to my own thoughts- hence I’m the owner and author this this website- i have the freedom to do so.
I don’t design for any reason other than hobby or small business and what I have created it amazing. what I use to test my results is up to me.
thank you for critiquing line by line my article. I really do appreciate your thoughts. I like how you refer to browsers as “he” because I always have thought of Safari or Chrome or Firefox more as the female kind. Go figure.
Anyway, thanks for writing everything you did. Do you have a blog where you’re sharing your wisdom?
I don’t have time for my website right now but I will buy some time soon
true this summer I plan to let all guns down for Open Source movement
that mean I will enroll there with my time & skills (this is one of the few things on this world which is ok to die for ..).
then I will invite you to target on my blogs
the main blog will be about Usability science & GUI Design
the second about Javascript / Action Script and Web Design (you know, composition, content scope and distribution, etc)
right now I prepare my big move from Europe to Hong Kong so I’m a bit busy now, sorry for that…
in May I will leave the old continent so I think around June you can be ready to aim on me. I’ll buzz you.
some of my websites made for some friends :
http://www.logisticsglobal.com.hk
http://www.garduri-de-beton.ro
http://www.stalpi-de-beton.ro
http://www.detectoaregaz.ro
http://www.top-invest.ro
mirebon.ro
OMG, really easy CSS tip, thanks!