Adding Background Image

  • Hello all,

    Site

    Trying to add a background image to the wrapper (white text area) in Twenty Ten, not to be confused with what is usually known as the background image.

    Here’s the code I’m using:

    #wrapper {
background-image: url('https://testsite.byethost18.com/wp-content/uploads/background_gradient.jpg');
background-repeat: repeat-x;
background: #ffffff;
 margin-top: 20px;
 padding: 0 20px;
}

    Any ideas what it’s not working? Thanks!

Viewing 10 replies - 1 through 10 (of 10 total)
  • Thread Starter DavidGMII

    (@davidgmii)

    Any ideas?

    As the image is part of your theme, take it out of your uploads directory and put it into an images folder in your theme. the css would then be:

    #wrapper {
background-image: url('images/background_gradient.jpg');
background-repeat: repeat-x;
background: #ffffff;
 margin-top: 20px;
 padding: 0 20px;
}

    And this would be the path to the folder:
    /wordpressdir/wp-content/themes/twentyten/images

    hi guys, im having a site lasermoleremovalsite.com. im having trouble to edit the theme, how can i put adsense code after the post title?

    Thread Starter DavidGMII

    (@davidgmii)

    Hello,

    Thanks for the replies folks. I first uploaded the background_gradient.jpg to the images folder in twenty ten. Afterwhich I changed the css to

    #wrapper {
    background-image: url(‘images/background_gradient.jpg’);
    background-repeat: repeat-x;
    background: #ffffff;
    margin-top: 20px;
    padding: 0 20px;
    }

    This didn’t work, so I changed the url to:

    background-image: url(‘wp-content/themes/twentyten/images/background_gradient.jpg’);

    Still no joy, any ideas?

    Thread Starter DavidGMII

    (@davidgmii)

    Any ideas?

    You need to add your background to the container div. Something like:

    #container {
        background: url('image-path');
        background-repeat: repeat-x;
	float: left;
	margin: 0 -240px 0 0;
	width: 100%;
}

    Replace the image-path with your actual image-path and play around with css to make it fit properly.

    Thread Starter DavidGMII

    (@davidgmii)

    Thanks for your reply Xam,

    My CSS code now reads: 

    #wrapper {
background-image: url('images/background_gradient.jpg');
background-repeat: repeat-x;
background: #ffffff;
 margin-top: 20px;
 padding: 0 20px;
}

    and at #container it reads:

    #container {
background: url('images/background_gradient.jpg');
        background-repeat: repeat-x;
	float: left;
	margin: 0 -240px 0 0;
	width: 100%;

    But still no joy. I emptied my browser’s cache in case that was causing any trouble.

    No it’s there, just saw it. Right click in the center of the post and click ‘view background image’. The image you use is white as milk with just a hint of grey in the center, so it’s hard to spot it. Try with a black image and you will see it, no doubt. But you need to delete the image from your wrapper section. No need to add it twice. The image goes down to the end of the post, you only have one post now, if you populate your blog with posts the image will run down to the footer.

    Thread Starter DavidGMII

    (@davidgmii)

    Thanks so much Xam for pointing that out to me – didn’t occur to me to click the post. However, what I’m really trying to do is add this image everywhere, including the home page. I also see that it stops too soon, leaving a small gap of white at each end.

    Is there any way to keep it “locked” in place? I really don’t want it to move about as the content lengthens. I need it to be placed just below the menubar, without moving. Any ideas? Thanks much for you help so far!

    David.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Adding Background Image’ is closed to new replies.