Different background image different pages - stretch no tiled

[antonyw 0]

Hi, I followed the instruction provided in another post for having different images on different pages and it worked well - thanks for that.

What I would like to do now though is set image to be stretched to full width rather than be tiled. Does anyone know how to do this?

Thanks in advance

[antonyw 0]

shouldn't this work?

 

body.page-id-341 {

background: url(http://website.com/wp-content/uploads/2013/11/zabeel1.png);page_background_image_repeat:no-repeat;

} 

[Danny+ 1,327]

Hi,

 

Can you provide a link to the site in question and also, when posted code, can you use the [ code ] bbcode please.

[antonyw 0]

www.maloneywhitehead.com

[Danny+ 1,327]

From viewing your site you seem to have this working, so not sure what the problem is.

You need to make sure you're using valid CSS, as there is no property called repeat or page_background_image_repeat.

See here for background properties - http://www.w3schools.com/css/css_background.asp

[antonyw 0]

Thanks - yes I got the right CSS in the end but it still didn't work. On large screens .... Or with a smaller image the image is tiled in x and y....

[antonyw 0]

background-repeat:no-repeat;......... Didn't work

[Danny+ 1,327]

On this page - http://d.pr/i/wuX3

There is no background-repeat loading, therefore, its not been added.

[antonyw 0]

Erm so...... Any ideas?

[Danny+ 1,327]

Yeah, you need to add the background-repeat: no-repeat to your CSS, the link I provided above, as all the CSS you need.

[antonyw 0]

Ok I'll do it again but it didn't work..... 'ang on

[Danny+ 1,327]

OK, use this:

 

 /* Replace X with your page id */

body.page-id-X {

background-image: url(background image url);

background-repeat: no-repeat;

}

[antonyw 0]

No..... Didn't work...

[Danny+ 1,327]

OK, your issue is that you have added the code twice, one with no repeat and the other without no repeat, see my screenshot.

 

Therefore, remove the line of code that doesn't contain the no-repeat.

 

http://d.pr/i/wT3o

[antonyw 0]

I'm an idiot...... That worked..... Thanks for that

[antonyw 0]

one more quick question, i set the background to fixed but its still moving with the content

i want the image to remain stationary while i scroll the text over the top of it...

[antonyw 0]

Interestingly the fixed image works fine on PC but not on iPad...... But it did work on iPad with the built in dms functionality for setting background image

[antonyw 0]

Is there some kind of touch screen scroll CSS?

[James B 436]

Hi there, I'm viewing on an iphone and the image is showing up as fixed. The image remains in place and the text flows over it as you scroll. Are you seeing the image move with the text then? If you've viewed previously on the ipad you might need to clear the cache in order to see any changes.

[antonyw 0]

I am still seeing the image move with text in iPad and iPhone even after clearing cache

[James B 436]

Which mobile browser are you using? And which version of IOS?

 

Apparently searching the web quiet a few mobile browsers don't support fixed.

 

Apparently only the latest updates do support this, so it might depend on what you're using to view. For full post see - http://stackoverflow.com/questions/16009035/fixed-position-background-on-ipad which has a workaround you can try and some more info on additional css to add.