WordPress.org

1. clement-hermansen
   Member
   Posted 4 months ago #
   

   I use Twenty Ten theme on my site: http://www.deebat.dk.

   The background image is hidden behind the content on the site, and I would like to have it show all over like: http://www.kirsebaergaarden.dk.

   How do I accomplish that?

2. riversatile
   Member
   Posted 4 months ago #
   

   Hi,

   In your theme style.css, you have to disable/remove the CSS attribute 'background' for 'Wrapper' :
   

   #wrapper {
   background: #ffffff;
   }

   Regards

3. clement-hermansen
   Member
   Posted 4 months ago #
   

   Thanks for your answer.
   And do I also set the positioning in #wrapper? I need the header and body lower on the page

4. Andrew Nevins
   Volunteer Moderator
   Posted 4 months ago #
   

   Yes, you set the positioning within the same #wrapper by using,
   

   background-size: 100%;

5. shadez
   Member
   Posted 4 months ago #
   

   try:
   

   body.custom-background {
   background: #F1F1F1 url('http://www.deebat.dk/wp-content/uploads/2012/12/solspiren.png') no-repeat center top;
   }
   
   #wrapper {
   margin-top: 320px;
   padding: 0 20px;
   }

6. clement-hermansen
   Member
   Posted 4 months ago #
   

   Thanks for your help. If you look at the page now: http://www.deebat.dk, the background image does not fill the whole screen. How do I do that?

7. Andrew Nevins
   Volunteer Moderator
   Posted 4 months ago #
   

   Did you try my suggestion? I can't check because your website won't load for me.

8. shadez
   Member
   Posted 4 months ago #
   

   Nevins is right... but add it to custom-background class...
   replace this with existing:
   

   body.custom-background {
   background: #F1F1F1 url('http://www.deebat.dk/wp-content/uploads/2012/12/solspiren.png') no-repeat center top;
   background-size: 100%;
   }
   #wrapper {
   margin: 0 auto;
   padding: 620px 0 20px;
   }

9. fredrak
   Member
   Posted 4 months ago #
   

   background-size: cover;

10. clement-hermansen
    Member
    Posted 4 months ago #
    

    @Andrew yes i tried your suggestion. The body.custom-background do i need to put that in the html or php script somewhere?

11. clement-hermansen
    Member
    Posted 4 months ago #
    

    Here is my CSS:

    #wrapper {
    background-size: 100%;
    margin-top: 300px;
    margin-left: 200px;
    padding: 0 20px;

    body.custom-background {
    background: #F1F1F1 url('http://www.deebat.dk/wp-content/uploads/2012/12/solspiren.png') no-repeat center top;
    background-size: cover;
    }

12. clement-hermansen
    Member
    Posted 4 months ago #
    

    Now the background image is fine in Firefox, but on Ipad it still doesnt fill the whole background. And positioning of header menu and content is also different?

13. Andrew Nevins
    Volunteer Moderator
    Posted 4 months ago #
    

    The background size style needs to be on the element that has a background image.

Reply

You must log in to post.