WordPress.org

Ready to get started?Download WordPress

Forums

Show backkground image on whole page (13 posts)

  1. clement-hermansen
    Member
    Posted 1 year 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 1 year 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 1 year 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
    Forum Moderator
    Posted 1 year ago #

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

    background-size: 100%;
  5. shadez
    Member
    Posted 1 year 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 1 year 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
    Forum Moderator
    Posted 1 year ago #

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

  8. shadez
    Member
    Posted 1 year 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 1 year ago #

    background-size: cover;

  10. clement-hermansen
    Member
    Posted 1 year 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 1 year 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 1 year 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
    Forum Moderator
    Posted 1 year ago #

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

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags