I created a page using a background, images and css - all worked OK when resizing browser window but the images etc. were png images with transparency. I was worried about png transparency support so I have now created a background with the images. The text is put in place using css. The problem is when the browser window is resized the background image stays in the same place but the text moves !
What is the best way to go about this ?
1/ I could carry on with the css png transparency method.
2/ Change the pngs to gif with transparency
3/ Do something to fix the text image going out of alignment with browser resize.
If you use an image with just the boards as the background and move everything else into divs above the background you should be able to solve the problem. Also, if you want the text to be over the square image all the time you need to put both of them into a single div container.
Yes K. Wolfe the background image contains everything except the filler text on the “paper”.
That was my original method AllanP and it worked well but as I said my images were then all png with transparent backgrounds. I was worried about browsers that did not support png images. I tried gif images but the shadows on the photos at the bottome etc. lost their gradiant? and became solid black.
With this method when the browser window was resized the new part of the boards showed through the transparent backgrounds.
Hi there, I definitely recommend not having the one large pic for obvious reasons. However when you are talking png’s, yes they are used quite often in web design. There are ways in order to compress, or make smaller the file sizes if load time is your concern as with most it usually is. Though I would recommend getting the Firebug plugin for Firefox, as well as the web developer toolbar for firefox to help with a great number of things when it comes to web development. The Firebug add on will analyze your page speed and give you a score, some say if you are getting 90% or over you are good while others say 80%…personal preference there.
Firstly you need to know that it is a horrible design error to have everything in the background.jpg. Backgorund.jpg should contain only your wood grain pattern. Every item such as nav images and content area need to be seperate divs with their own styling.
Thats an interesting article Kyle - I think I could live with that and will give it a go. Then I can just use the background as you say and place everything else with css which was my prefered method.
I will have to see it Imagemagick works with the alpha part; I know it can work with png8.
Anthony, dont worry about IE6 and its transparency issues.
Go with the original method you have and support more modern browsers. I have a quote from a designer friend regarding IE but I really cant post it here as most of it would just be *'s
What browsers are you attempting to support? I use png’s with no problems using IE, FireFox, Opera, and Safari…the highest percentage of users use Firefox then IE on the average. There is a long support for the png format, older browsers such as IE 6 may not support the transparency aspect other than that you should be fine
If the website was mine I would say to hell with people still using IE6 but I can not provide a website for a company and have it put white or coloured boxe around images. Even if it is a small percentage of users.
Imagemagick seems to only produce indexed png images so that method in the blog is out. I do not have Fireworks and I have a lot more things I would like to buy rather than some expensive software for one set of images.
My choices now seem to be:
1/ Use the large background and left justify it - decided not to go that way.
2/ Use the css method and put the content over some plain coloured background which is then over the planks. I can then set the background colour in the png - will then use jpg images. Not a particularly exciting idea. I suppose I could have a seperate image for the content background something like a cork board ? Might be the way to go.
3/ Go back to a normal centered css method which is a pain as the website is for sheds which are shades of brown and I wanted to introduce some colour and make it interesting.
Sorry, I haven’t looked at the site, but is it a solid color background, or a background you can capture and put the graphic on to have it fit? Meaning if you take the pic that you are wanting transparent if you use Photoshop you can erase the white background, put it on top of whatever background you want, or you can select the pic items cut and paste then clean up the edges…A little technical…and not sure if you have access to the program but it is what I do if I am putting different graphics together and wan them to look natural with one another…
The background was wooden planks across the screen; the effect I was after was pieces of paper etc. pinned to the wood.
I wanted the content centered on the browser window with the planks displayed behind the pieces of paper ( with shadows ) hence the transparent png images.
The problem was the planks are random so you can not use a piece of the plank behind the image as a background as depending on the browser window being resized the different part of the plank would be behind the image and it would look odd.
