Background image

12 posts from 2 voices

• Started 2 years ago by gren666
• Latest reply from Dude
• This topic is not a support question

Tags:

• background
• image

1. 

   gren666
   Member

   Hi there,

   Thanks for a great theme! If I want to have some graphics on the side of the main page that follow when you resize your browser like for example the iphone and ipad at kriesi.at, how do I accomplish this? If I just change the background image this wont work so I guess I have to somehow attach it to the main page? I would also like to maybe put some graphics on top of the main page like the coffee cup on kriesi.at. Is this possible? Thanks again

   Best Regards

   Johan

   Posted 2 years ago #
2. 

   Dude
   Dude

   As I don't have an iphone I'm not sure what's special about kriesis website but he uses a common methode to implement his background images. Here's the code:

   #bgwrap{
   width:100%;
   position:relative;
   display:table;
   z-index: 1;
   background: transparent url('images/skin1/stuff_bg_less.jpg') no-repeat top center;
   }

   Posted 2 years ago #
3. 

   gren666
   Member

   Hi there and thanks for your reply,

   Well, I wont use iphones on my website thats for sure..:-) Is the graphics on Kriesis webpage part of the background image? Im really not so sharp at coding so would you please guide me in the right direction as to where I put the code?

   Thanks alot!

   Johan

   Posted 2 years ago #
4. 

   Dude
   Dude

   Yes. The image can be seen here: http://www.kriesi.at/wp-content/themes/kriesi_at/images/skin1/stuff_bg_less.jpg

   Posted 2 years ago #
5. 

   gren666
   Member

   Great! So where do I put or modify the code you wrote?
   Last question...:-)

   Thanks

   JOhan

   Posted 2 years ago #
6. 

   Dude
   Dude

   The best way would be to use the Background manager under Appearance > Background and to upload it there. Please be aware that I can't give you the copyright for the image as I didn't create it. So I'm not sure if Kriesi or the copyright holder allows you the usage of the image.

   The Dude

   Posted 2 years ago #
7. 

   gren666
   Member

   Hi again,

   But I dont want to use his image, I want to create my own graphics. Should I use the code you wrote and if so, where should I put it? In style2?

   Thanks

   Posted 2 years ago #
8. 

   gren666
   Member

   If you look at http://www.psdmansion.com/test/ I did a simple test where I put a star behind the main page and when you resize you browser the star wont attach to the main page. Im sorry if I wasnt clear enough. Do you know what I want to do?

   Posted 2 years ago #
9. 

   gren666
   Member

   Ok, I got it to work with some settings. Im new a this .....:-) Thanks for all your help!

   All the best

   Johan

   Posted 2 years ago #
10. 

    Dude
    Dude

    You can try to add the background image to the body via css like:
    

    body{
    width:100%;
    position:relative;
    display:table;
    z-index: 1;
    background: transparent url('images/skin1/stuff_bg_less.jpg') no-repeat top center;
    }

    If that doesn't work you can try to attach it to a div like:
    

    #wrap_all{
    width:100%;
    position:relative;
    display:table;
    z-index: 1;
    background: transparent url('images/skin1/stuff_bg_less.jpg') no-repeat top center;
    }

    Please delete the background from the background manager first or your css code will be ignored. Add this css code to style1/2/3.css

    Posted 2 years ago #
11. 

    gren666
    Member

    Now where talking! Thanks alot! It works.
    Thanks again for a great theme!

    All the best

    Posted 2 years ago #
12. 

    Dude
    Dude

    Glad that I could help.

    Posted 2 years ago #

RSS feed for this topic

Reply

You must log in to post.