This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

setting background image to no-repeat

Open 6 replies premiumthemetheme-vantage
Deborah Tobias
11 years ago · Last reply by Deborah Tobias 11 years ago

Been using Vantage exclusively! Thanks for a great template.
Please see http://farmingfoodie.com

As you can see the Page background image is repeating horizontally and vertically. I’d like to somehow set it to 100% since I’m using Full Width layout.

I’ve added the following CSS:

/* Set Background Image to NoRepeat */

body {
  background-color: #46913f;
  background-image: url("http://farmingfoodie.com/wp-content/uploads/2014/08/background-artwork2.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}

Any suggestions? Hope next versions allow control of this :)

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

6
  1. Greg Priday Staff 11 years, 6 months ago

    Hi Deborah

    You should be able to achieve this with background-size: cover. So your CSS will look something like this.

    body { 
  background-color: #46913f;
  background-image: url("http://farmingfoodie.com/wp-content/uploads/2014/08/background-artwork2.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center; 
  background-size: cover;
}

    You can read a little more on this property here: http://www.w3schools.com/cssref/css3_pr_background-size.asp

    This would be a good thing to add in a future update. I’ll take a look at whether this is possible.

  2. Deborah Tobias 11 years, 6 months ago

    I put your code into my css but no change in background. Also added:
    tml{
    height:100%;
    min-height:100%;
    }
    body{
    min-height:100%;
    }

    /* Set Background Image to NoRepeat */

    body {
    background-color: #46913f;
    background-image: url(“http://farmingfoodie.com/wp-content/uploads/2014/08/background-artwork2.jpg”);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    }

    Any thoughts?

  3. Deborah Tobias 11 years, 6 months ago

    html{
    height:100%;
    min-height:100%;
    }
    body{
    min-height:100%;
    }

  4. Deborah Tobias 11 years, 6 months ago

    To clarify, the background image should cover the width and not repeat so the background color fills the screen under the photo..
    Here’s a same site:
    http://latinroguecleaning.com/

  5. Deborah Tobias 11 years, 6 months ago

    Lets close this thread.

  6. Deborah Tobias 11 years, 5 months ago

    Couldn’t do this – tried everything and eventually lost the client.

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread