maxquinn 0 Report post Posted February 25, 2011 I'm trying to do the same thing, but that code when posted into the Header Scripts section does absolutely nothing :S Any ideas? Cheers, Max. Share this post Link to post Share on other sites
bryan-hadaway 3 Report post Posted February 25, 2011 Okay, pause... rewind. We went overkill here... this is much easier than what we've made it on ourselves. - Default layout is 960px indeed (adjust if you need). So we create a background image bigger than that leaving a blank/styled 960 x whatever pixels rectangle in the middle and design our graphics on the outside of that. If you use Photoshop or Illustrator great. If you don't have a graphics editor find a popular free one here: http://www.gimp.org/ - Once you have your graphic designed upload it via the WordPress Media area and copy that URL. - Now, in Custom Code > Custom CSS add: `body{background:url(http://www.yourwebsite.com/images/bg.gif) top center no-repeat}` Tips: Based on the top margins of the layout you'll have to adjust the graphic. Thanks, Bryan Share this post Link to post Share on other sites
maxquinn 0 Report post Posted February 25, 2011 But then surely it won't stretch/shrink to fill the screen? So if someones on a 1024 monitor my images won't be full shown, and if they're on a larger one they'll be white spaces round the edges? Share this post Link to post Share on other sites
catrina 103 Report post Posted February 25, 2011 Yes, that is true when it's an image that isn't a pattern that just repeats to cover the entire space, but it will still cover the 960px space that the layout provides. Please read the docs before posting. Please do not private message me unless I ask you to. Designer | Catrina Dulay Founder | Catrina and Mouse Share this post Link to post Share on other sites
maxquinn 0 Report post Posted February 25, 2011 I'm confused, it doesn't need to cover the 960 space. That middle space will be blank, but then on either side of it there will be kind of patterns (but not tiled, just one image of an abstract pattern). These patterns have solid outside edges so need to line up to the edge of the screen. This is essentially the same problem as the thread starter as the image needs to stretch to the width of the screen. Share this post Link to post Share on other sites
cmunns 16 Report post Posted February 25, 2011 If you have a live link and that js code still in there I can check for potential js errors on your site Share this post Link to post Share on other sites
maxquinn 0 Report post Posted February 27, 2011 Thanks! I've just put the code back in. www.broken-culture.co.uk Share this post Link to post Share on other sites
maxquinn 0 Report post Posted March 2, 2011 Any ideas anyone? Thanks for the help so fat as well! Max. Share this post Link to post Share on other sites
cmunns 16 Report post Posted March 2, 2011 I see well. I don't think you need script after all...because no body will be able to tell if it tiles when they can't see the middle or if you make it the right size. At any rate the script isn't working because the jquery selector doesn't exist. img.source-image Share this post Link to post Share on other sites
maxquinn 0 Report post Posted March 2, 2011 Thanks for taking a look. The background image here: is how I'd like it to look, but I can't see any way to do it by tiling when surely on larger screens it will multiply and on small screens the right side won't be shown? Sorry I'm quite new to the code side of everything! Where exactly would I put that jquery selector? Share this post Link to post Share on other sites
bryan-hadaway 3 Report post Posted March 3, 2011 Good design practice; you don't want your background image to stretch based on user screen size or resolution. The best practice is to set a background color and have your background image fade into that color. Here's the kind of trick you would use to stretch the background image (not recommended): http://www.quackit.com/html/codes/html_stretch_background_image.cfm Thanks, Bryan Share this post Link to post Share on other sites
