background image

Follow

Comments

17 comments

  • Avatar
    Zetya Support

    Hi Alice,

    Yes, this is straightforward.

    First, upload your background image to the Theme Assets area (via Theme > Template Editor). Then find the body rule in styles.css.liquid (should be around line 7) and change the background attribute to this:

    background: url("{{ 'background.jpg' | asset_url }}") no-repeat fixed center top transparent;

    I've had another request to add this, so I'm going to make it a theme setting (I will upload it Nov 24 if you haven't purchased the theme yet).

    Thanks, Gavin.

  • Avatar
    Alice Yoon

    hi Gavin,

    i've just purchased your template :(

    anyway to get the theme setting tomorrow?

    thnx for the quick reply!

    Alice

  • Avatar
    Alice Yoon

    Hi Gavin,

    Just in case I can't get the update. I added that line of code but where do i upload the background.jpg to? and what size should the image be to sit well?

    Thank you!

    Alice :D

  • Avatar
    Zetya Support

    Hi Alice,

    Thanks for purchasing the theme :-)

    You can upload the background image to the assets area (this is under Theme > Template Editor in Admin).

    Vanity is 960px wide, so you would need an image that is wider. There is a good tutorial here if you are going for something similar to the Jamie Oliver site: http://www.webdesignerwall.com/tutorials/how-to-css-large-background/

    Thanks, Gavin.

  • Avatar
    Alice Yoon

    Hi Gavin,

    I changed the background.jpg but it won't update from the previous background.jpg i uploaded 2 days ago.

    the first time i did work, it's just now the second time when i want to change the jpg it won't change, even after i deleted the first jpg i uploaded it is still there!!

    appreciate your help!

    Alice :)

  • Avatar
    Zetya Support

    Hi Alice,

    You are probably having a cached image problem. Did you try flushing your cache?

    Thanks, Gavin.

  • Avatar
    Maggie Stepien

    Is it possible to also include a box content image? For example, my site currently has a header image (as a logo), a background and a box content image. (see: www.prettyindulgent.com). Is it possible to do something similar with Vanity?

  • Avatar
    Zetya Support

    Hi Maggie,

    Yes, this would be possible. It would be similar to how you have done it with your existing site.

    Thanks, Gavin.

  • Avatar
    Maggie Stepien

    Thank you!

    Is there an option for taking an image that is much smaller and tiling it, as far as the background is concerned?

  • Avatar
    Zetya Support

    Hi Maggie,

    Yes, this is a recent addition to Vanity theme settings. The background can be tiled or centered.

    Thanks, Gavin.

  • Avatar
    Maggie Stepien

    That's fabulous, thank you!!

  • Avatar
    Melissa Grantham

    Thanks Gavin, the new background options, work a treat :) ... www.myminimunchkin.com.au

  • Avatar
    Chuck

    Gavin,

    Is it possible to have a background color only in the footer area?

    Thanks

  • Avatar
    Zetya Support

    Hi Chuck,

    Yes, this is certainly possible, but it is not part of the theme settings or related to the background image. You will need to modify the CSS (styles.css.liquid), adding a background-color rule for #footer.

    Gavin.

  • Avatar
    Enquiry

    Hi Melissa your store looks great.  Can I ask what size background did you use?  

    Also my store is looking much wider than yours - did you alter any settings to get the width thinner?

    Many thanks

  • Avatar
    Claire Salter

    Hi,

    I am currently using the Nouveau theme and have tried adding the background image to both the body and html in the theme.css.liquid file and i cannot see the image displaying.

    Im not sure what im doing wrong. If you can give me some help that would be wonderful.

    thanks,

    Louise

     

  • Avatar
    Zetya Support

    @Claire - this forum is for the Vanity Theme from Shopify Concierge. Please contact the developers of the Nouveau theme for help with that theme.

    Thanks, Gavin.

Please sign in to leave a comment.