Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Wanting my wrapper to no be one block but with a transparent background.

    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;

    Code:
    body{
        background:grey;
    
        }
    	
    #wrapper{
        width:800px;
    	height:800px;
        background-image:url("../images/index wrapper.jpg");

  • #2
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #3
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,235
    Thanks
    10
    Thanked 270 Times in 269 Posts
    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.

    Dave

  • #4
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •