Jump to content
Sign in to follow this  
rkazantsev

Background image ?

Recommended Posts

maxquinn

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

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

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

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

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

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

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

Any ideas anyone? Thanks for the help so fat as well! Max.

Share this post


Link to post
Share on other sites
cmunns

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

Thanks for taking a look. The background image here: Background4.jpg 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

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×