• open panel

How To Change Background Image In Weebly

 

Adding your own background for Weebly Site is one of the quickest ways to personalize your website.

Even if you use a standard Weebly theme, you can give your site a unique appeal by setting the right background. You can either use a full size image, or repeat a pattern to create a canvas as the backdrop.

Do you know, you can add different backgrounds for different pages of your Weebly site ?

In this tutorial, we provide Step-By-Step Instructions for

  1. Setting the same background for all pages of your Weebly Site
  2. Setting different backgrounds for different pages. Check the following sample pages with different backgrounds

Background Image In Weebly

SiteShowcase Page with Red Background Pattern

Background Image in Weebly

SiteShowcase Page with Black Background Pattern

Setting Same Background For All Pages

Step 1: Upload the image to your Weebly Site

Upload the image or pattern you would like to use as Background via “Design –> Edit HTML/CSS –> Add New Files“. Lets call this file is background.jpg

Step 2: Update the body style

Update the body element in main-style.css to use the uploaded image. Locate body { } tag which may look some thing like

body {
 background-color:#000000;
 font-family: arial, sans-serif;
 font-size:12px;
 color:#666666;
 margin:0;
 padding:0;
}

Add the following line just before the closing }:

background: url(background.jpg) repeat;

Note that the name in url matches the name of the file uploaded in Step 1.

If there is already a url defined in the body{} for background, then replace it with the above line. If you do not want the pattern to be repeated, use “no-repeat” in place of “repeat”.

 

Setting Different Backgrounds For Different Pages

Step 1: Upload all the background images

Upload all the background images you would like to use for the pages via “Design –> Edit HTML/CSS –> Add New Files“. Let us say the files are bg1.png, bg2.png etc

Step 2: Edit the Header Code or Footer Code

Go to the “Pages” Tab and select the Page you would like to set a particular background. Click the “Advanced Settings” and add the following in the “Header Code”

<style type="text/css">
body {background:url('/files/theme/bg1.png') repeat;}
</style>

This sets bg1.png as background for this particular page only. You can repeat Step 2 for any page you like with its own background.

[Note: You may not see the background change taking effect in the Weebly Site Editor  because the page specific header code does not run in the Editor window. You will see the background in your published live site. If your site does not show the new background, add the style code in "Footer Code" of Advanced Settings.]

 
Raju Nunna

About Raju Nunna

Raju Nunna is the Founder of "Weebly Forums"

54 Responses to “How To Change Background Image In Weebly”

  1. Hi, sorry for the off topic but I would ask you if there is a way to edit the mobile version of a Weebly website? because it looks very ugly and I don’t want to turn it off :(

     
    • Jack
    • Reply
    • Mobile version is not editable. It is auto generated from the elements on your site. What is your URL ? Usually, all the styling is ignored in mobile version. If you do not like the aesthetics of mobile site, there isn’t much you can do. But if you think the information is jumbled up and down, then you should see how the elements are ordered in a mobile version. Take a look at the article about Mobile Version of Weebly Sites to see how the elements are ordered.

      [P.S: Would appreciate if you can use the Weebly Discussion Forum for any off topic discussions]

       
      • Raju Nunna
      • Raju Nunna
  2. I’d like to have the same repeating background for the entire page. When I use this tutorial with the existing CSS for Weebly for one of its basic templates, it does not repeat the background behind the side menu bar. If I add it in to what I believe is the sidebar CSS, the pattern doesn’t line up. Any ideas? Thanks.

     
    • Valerie
    • Reply
    • What is the URL ? It depends on which other attributes are present for background and how those properties are inherited. If there is no-repeat some where and is being inherited, then you will have to explicitly specify repeat to override what is being inherited.

       
      • Raju Nunna
      • Raju Nunna
    • I’m waiting for the domain purchase to transfer to Weebly. I have not changed any attributes for anything else and am using the Autonomous Weebly Theme (although I am looking for one with a top menu and a side menu).

       
      • Valerie
  3. Is there a way to put a floating picture on my background next to my content? I was thinking of a man standing like he’s leaning on the side of the screen.

     
    • wjohna1611
    • Reply
    • That is a different property altogether.
      You need to use position:fixed for the picture.

       
      • Raju Nunna
      • Raju Nunna
    • I know of the position:fixed attribute but how do I actually put an image over my background. I was wanting to keep my background the same but wanting to put a picture of a man over it that was fixed. Please help.

       
      • wjohna1611
  4. Thanks for all your help!
    Is it possible to have the background fixed in one place on the screen, and the main body of the website with all the information and text “floating” in front of it, so that the viewer can scroll up and down and view the website while the background image remains static?

     
    • (PS, I tried position:fixed as advised to the other person above but it didn’t work – maybe I didn’t do it correctly?)

       
      • Aysen
    • These are two different aspects.
      If you want the background image to stay put while the text scrolls over it, then you need to use

      background-attachment:fixed;
      

      position:fixed; is used for different purpose, like the one required by wjohna.

       
      • Raju Nunna
      • Raju Nunna
  5. I cant seem to change the background for a different page. I have tried your steps above. This is what it says on my css – is there something that needs to be changed?? Thanks

    body {
    line-height: 1;
    font-family:Arial,Microsoft,sans-serif;
    color: #000;
    background-image: url(“background.jpg”) !important;
    background-attachment: fixed;
    background-size: 100%;
    width: 100%;
    height: 100%;
    max-height:100%; /* fix height for other browsers */

     
    • Are you trying to set the same background for all pages ?
      (or) Are you trying to set different background for different pages ?

      If you would like to change it for all pages, in your case, upload the image and rename it as “background.jpg”.

      If you are trying to set different background for selected pages, what is the url of the page you are trying ?

       
      • Raju Nunna
      • Raju Nunna
  6.  
    • You need to add some thing like this

      <style type="text/css">
      body {background:url('/files/theme/bg1.png') repeat;}
      </style>
      

      to your “Header Code” corresponding to that page.

      Follow the second section of the tutorial which describes how to set different background images to different pages.

      Discard the “repeat” at the end if you are adding one big jpg.

       
      • Raju Nunna
      • Raju Nunna
    • Firstly, thanks so much for your time. I managed to get different pages with different backgrounds to work on another simple website I have. The one Im having trouble with I bought from DIV TAG and the background coding is

      body {
      line-height: 1;
      font-family:Arial,Microsoft,sans-serif;
      color: #000;
      background-image: url(“background.jpg”) !important;
      background-attachment: fixed;
      background-size: 100%;
      width: 100%;
      height: 100%;
      max-height:100%; /* fix height for other browsers */

      Is something in this coding stopping it from working?

      Thanks again

       
  7. Ive managed to work out how to do it!!!

     
  8. Hi, im trying to change the background, it does work on Weebly, but when i publish it, it doesn’t! What should i do?

     
    • coco.rush28
    • Reply
  9. Hi.
    How can I add a background image in the New weebly templates?
    It’s quite different from the older coding.
    Thanks

     
  10. Is there any way to do this through the HTML/CSS editor? I am worried that this will interfere with SEO, would it?

     
    • Charlie
    • Reply
  11. Hi, so if I need the background to be fixed how can I do it?

     
    • Daniel
    • Reply
  12. Hi, please can someone help? I’m tearing my hair out!

    I’m trying to add a background to my site, following the tutorial above. I’ve successfully uploaded the file “Web background.jpg) but I cannot get it to work on the webpage. I’ve tried different templates, and not had any luck with any of them. Here is what the script looks like:

    /* General Styling and Structure
    ——————————————————————————–*/

    body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #000;
    margin: 0;
    padding: 0;
    background: url(Web background.jpg) repeat
    }

    ————-
    Please can anyone help? I feel like I must be missing something obvious!

    Thanks

    Janey

     
    • You are missing a “;” at the end of the line for background

       
      • Raju Nunna
      • Raju Nunna
  13. Thanks for your reply – I’ve added it in but still no luck. Any ideas?

     
    • Please post in the forums with details of your website.

       
      • Raju Nunna
      • Raju Nunna
  14. hi! I’m trying to set a background image for all the pages but I cannot get to work it on my site. Here’s what the script looks like:

    body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #604660;
    background: url(“background.jpg”) repeat;
    margin: 0;
    padding: 0;
    }

     
  15. I have attempted to set my site so I can have different backgrounds on different pages.I have read /googled /u name it,at least dozen times. I hate admitting defeat to ANYTHING but I’m throwing in the towel. Please Help..

    body {
    background: #020200 url(‘bodybg.jpg’) fixed;
    font-family: Tahoma,arial, sans-serif;
    font-size: 12px;
    color: #666666;
    height: 100%;
    margin: 0;
    padding: 0;

    }

    http://kandysworld.weebly.com/blogs.html <–Page I wanna change.

    body {background:url(‘/files/theme/bg1.png’) repeat;}

    code I added to header in the page under “Advanced Settings”
    I have tried breaking URL down and putting it in this header coinciding but I am just beyond confused now.Thought “Oh I Got It” Nope %&*##$ I so appreciate any help Ya’ll can give me.Im very new to this only couple months so keep that in mind please.

     
    • Kandy
    • KandywthK
    • Reply
    • I failed to mention I am labeling image bodybg1 for this page I wanna switch. and i confirmed it to be a .jpg

       
      • Kandy
      • KandywthK
    • Sounds like the file name you are using in the url is wrong. Check the jpg/png extensions too.

       
      • Raju Nunna
      • Raju Nunna
  16. I am trying to make a colored box that is behind an image. I don’t want to change my whole background, but rather just have a colored box with an image in it on top. Here is a link to the page:

    I would like to put a box behind some of the pictures to make them ‘pop’. Any help you could give would be much appreciated. I am just starting to get used to html and CSS so I can do it with some instruction!

     
  17. Oops! Here’s the link:

    http://metavinyl.weebly.com

     
  18. When following the instructions for changing the background for all pages and individual ones, the background image only applies to the footer and no where else on the page?

    body {background:url(‘/files/theme/bg1.png’) repeat;}

    Thanks:)

     
    • John
    • Reply
    • The theme you are using could be layering two backgrounds. Post it in Forums with your website address.

       
      • Raju Nunna
      • Raju Nunna
  19. So let’s just say I have a homepage and 20 subpages. I want the homepage to have its own background image (rotating in fact), 3 subpage to have their own specific images, and the other 17 to all default to a standard background, is that doable? Or would I have to hardcode each page in the CMS with the specific image?

     
    • In some form or the other, you will need to tell the page which image to be used for background. If it is deviating from the standard background image, it has to be specific to the page. You can add it using custom-html, or in the advanced settings for the page, or create a page layout for most common use and specify it there. It is doable. You will have to figure out what suits you best.

       
      • Raju Nunna
      • Raju Nunna
  20. when i enter that code in header code there is no change can you pls tell me by step by step how to put it plssssssssss
    iam asking for changing background in different pages

     
    • adithya
    • Reply
    • Please post any specific details in the forums. Post your website, and the issue so that there is some thing to look at and assist.

       
      • Raju Nunna
      • Raju Nunna
  21. the website is http://www.keralotsavam.in/cinema.html
    i did like what you said i.e the instruction for changin the background of a single page and you can see what happened
    the background is coming like a patch in the lowest region of the page .The tile like background in the end is the background i want for that page pls help me
    by the bye the site is just started pls giv us ur suggestion

     
    • adithya
    • Reply
  22. Hey, so I started building a site on Weebly and wanted my own background for my site. My own being an image, a jpeg. The size of my background is 1920×1080 and fits perfectly with the elements on my page, e.g. Nav bar ect. Yet for other people, everything is out of place, like the background is scaled.
    I figured the problem was that bcause my computer’s resolution is 1920×1080 ’1080p HD’ and the sites background image is the same size means that everything looks good. Where as if other peoples computer’s resolutions are higher or lower, then it starts to mess up. I can also reproduce the same effect by zooming in and out with my browser (chrome). Do you have any solutions to my problem?

    Regards
    Ashley Brown

     
  23. I’ve added a large picture as background, and I’d like to put my text boxes on top of it but can’t do that because the picture stops at the edges of that box. How can I show the picture on the full page width ?

     
  24. just a quick question
    i have managed to change my background but think it stands out too much and detracts from the content
    i like the background i have but would like to make it more transparent (opaque) is there an easier way that using photoshop to make it transparent by using the weebly interface

     
  25. I’ve tried this and when I publish it and open up my site, I can see the initial background that I want but then it’s replaced quickly with the original one that’s apart of the theme. I basically just wanted to change the background color of my blog page and none of the other pages. Any help appreciated. I’m about to throw the towel in. I used WordPress before and although it was a lot harder to initially set everything up, it just seems like I could find my way around it a little easier for things like this. But other than that, Weebly has been wonderful!

     
    • Please post your question in the forum with the specifics of your site.

       
      • Raju Nunna
      • Raju Nunna
  26. I’ve tried it for my blog, because of course I want to have the photo of my choice up there in the top background. The theme that I chose is just right for me. When the blog loads though, it’s the opposite of Renee, it shows a plain colored background then quickly shifts to my uploaded background. it’s kinda okay though.
    you might want to check it out:
    http://www.theescritoire.com

     
  27. Hi,
    I am trying to add a background image to the entire home page only. I tried following the steps in part 2 but it is not working quite right. I have a big black bar that I can’t seem to loose. http://www.janapatton.com
    This is my code I put in the footer code in advanced settings on only the home page.

    body {background:url(‘/files/theme/janahome.png’);}

    and this is what is in the main ccs file:

    body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #797979;
    text-align: left;
    background: #202020;
    background-color: #141414;

    }

    wrap {

    background: #202020;
    border-top: 8px solid #ffffff;

    }

    header-top {

     
  28. Hi, I have been trying to change the background to my site. I have now realised the main page isn’t actually a background but a Header Wrap, I have now changed the main-wrap code to suit my picture. The preview now shows what I want to see but when going back to the editing pages or main site the pictures do not show. When I go back to the CSS editor all looks good! What am I doing wrong?
    I’m new to all this, thanks.

     
  29. How can I change the background colour behind my header? I feel it clashes with my header image.

    I tried changing the hex code in the “edit HTML/CSS” “body” “background”, but it just changed a wee stripe of the background behind my site title, and left some green strips either side of my header image!

     
  30. Hi there,

    How do I remove the white space/borders/box around my logo after adding a new background?
    Cheers!

     
  31. I am building this website for a client and have modified many aspects away from the Weebly norm. Love weebly and how easy it is to work with. This is a Pro site and we did modify the background and as you can see it has a top bar and then a gradient tone leading to a bottom image. The page texts are being completed and that is leading to different sizes and this helped me to modify the Foreclosure Defense page to be taller. Thank you. Another question that kind of falls along this strand is there a way to make this type of background grow in length as the page gets taller? Then I have the issue now of a width problem. Some computers start showing a bottom slider allowing the visibility of the entire page width. This could also be an issue with the footer that I modified to be a full width of the screen and matched it to the background width. I have been trying to also get the footer to be dynamic and allow for different page widths so this is a potential issue also.
    I could really us some directions.
    Thanks
    Greg

     
  32. Hello,
    Great Tutorial!
    Can I also have a background like that changes time-to-time (Like sliding Images).
    Thanks
    Saloni

     
    • saloni
    • Reply
  33. On How to Change Background Image, you state: [Note: You may not see the background change taking effect in the Weebly Site Editor because the page specific header code does not run in the Editor window. You will see the background in your published live site. If your site does not show the new background, add the style code in "Footer Code" of Advanced Settings.]
    However, it may interest you to know that you CAN see how it’s working by going to the DESIGN tab and then clicking the Edit HTML/CSS button.
    THANK YOU for your website!!

     
  34. I have followed the instructions to put a unique (fixed) background for every page. It works, but it doesn’t autofit to the screen resolution. On some screen resolutions it covers the whole screen and on others only a part of the screen.

    I would like to make every background of every page fit automatically to the screen resolution so it covers the whole screen. How to do it?

    Pls help me. Tnx

     
    • Rutger
    • Reply
  35. Hey sadly this will not work for me. Really dont know why, and the weebly helpers wont help as they say they dont assist css or html
    http://www.secretsofspeakingnativeenglish.com/background-test.html
    This is the page ive put it on but not working :’(
    help would be greatly appreciated

     

Leave a Comment

Weeblyforums.com is neither affiliated with nor endorsed by Weebly
© 2013 Weebly Forums, a CrossWeb.ca venture

Facebook

Follow WeeblyForums on Facebook
%d bloggers like this: