View Full Version : Wanting my wrapper to no be one block but with a transparent background.

02-07-2012, 05:04 PM
Hi all I apologise in advance if its easy to solve this using the search function, but im very new to html/css and currently studying it at college on the level 2 course so not sure on the terminology i would need to find this on the search function.

Im trying to create a webpage that has the wrapper as a book that i drew (not very good but it isn't going to be commercial just my college hand in and to keep for nostalgic reasons), now im going to do the navigation bar as seperate buttons on the book as bookmarks, and a photo album as you open up the other pages dedicated to my 2 month old baby girl.

The buttons I can do fine using absolute positioning the problem im having is, I drew a book in photoshop on a transparent background hoping i could merge this as my wrapper so my background coincides with it and doesn't leave a big white box around it but not sure how to do this.

Iv only just started this today so theres no code except for the basic stuff, the grey background im obviously not keeping but want to get it working first before i start on my background;


This is the css i have currently, like i said very basic but want to get this bit sorted before i spend more time on this;



background-image:url("../images/index wrapper.jpg");

02-07-2012, 06:16 PM
Sorry for double post issue fixed, saved as .jpg before, changed it to .gif with transparent background and solved it, not a html/css issue, sorry.

02-07-2012, 06:22 PM
gif will work as you've seen, but .png will support a lot more colors than gif, as well as a transparent background. So if you want very smooth gradients, or photo-realistic images, then png will be the better format to use.


02-07-2012, 06:51 PM
thanks for the heads up about the .png will use that in future, think i need to work on my graphics design first though before I start worrying about texture quality :D