How do I do get this effect?

You use CSS to achieve this.
You apply position: fixed to the desired element.

Have you a Child Theme or Custom Style plugin?

Hi,

Yes, I’ve a child theme set up, with a custom stylesheet waiting for adapting. I’m adapting the TwentyEleven theme, so there should be no hidden surprises or conflicts.

Sorry, but I’ll need this process explaining step-by-step.

Do I need to create a new div-class?
Is the mirroring of the elements on one side (i.e. the feathers) the result of a CSS action, or are they 2 different pics?

Have you a link to your website or Pastebin.com of your HTML and CSS code for one relevant page?

https://ocahostel.com.br/wp-content/themes/ocahostel/images/bg-body.jpg
no they are using it as a single image

there are different ways to do it,
one of them is
add
just after your body tag

<img src="images/bg.jpg" id="bg" alt="">

and in css
#bg {
	position:fixed;
	top:0;
	left:0;
	/* Preserve aspet ratio */
	min-width:100%;
	min-height:100%;
}

Andrew,
No point: it’s the TwentyEleven theme, so far unmodified.

Robin:
Thanks, that’s great. I’ll give it a go:)

I think what Robin meant to say was

“After you’ve created and activate a child theme of Twenty Eleven, make any modifications to copies of the Twenty Eleven theme files in wp-content/themes/twentyeleven-child.

We wouldn’t want your work to get wiped out when an update to Twenty Eleven comes around.”

Or something like that. ??

Jan, Aga already mentioned that

Yes, I’ve a child theme set up, with a custom stylesheet waiting for adapting. I’m adapting

Hi,

I created the background, and applied it. But while it’s fixed in position, the actual WP page isn’t, and slides around over it when the browser window is resized.

In the example site I referenced in my first post, this doesn’t happen: the bg image is “stuck” to the WP page. This is what I want.

How do I get the bg image and the WP page to “stick” together?

Thanks…

Can you link us to the page, or show us a Pastebin.com of HTML & CSS you’re using for that page?

Sure:

https://www.akashawacha.co.uk/

Compare to:

https://ocahostel.com.br/

I don’t see the difference in ‘stickiness’.

Try resizing your browser window.

On the example site, the pictorial elements at the sides “stick” to the WP page. On my site, the WP page simply slides over them. Extending the browser window widthways reveals that, on the example site, there seems to be another image below the bg image… ???

How https://ocahostel.com.br/ works:
1
First this image loads as the background to the html element
https://ocahostel.com.br/wp-content/themes/ocahostel/images/bg-html.jpg
This image is used to repeat horizontally and vertically.

2
Then this image loads as the background to the <div id="sticky"> element
https://ocahostel.com.br/wp-content/themes/ocahostel/images/bg-body.jpg
This image is used to repeat vertically.

did u try doing this way

add background-size:100%; as well
<img src="images/bg.jpg" id="bg" alt="">

and in css
#bg {
	position:fixed;
	top:0;
	left:0;
	/* Preserve aspet ratio */
	min-width:100%;
	min-height:100%;
}

I would suggest this:

– For your image “https://www.akashawacha.co.uk/wp-content/uploads/2012/08/bg-body1.jpg”, redo it with just the feather/mask/etc. images without the pattern background and save it as a transparent “.png”

– I’m assuming that the pink/blue pattern is a small repeating image that you used to create the background when you made the complete image.

Upload both new images to your WP Media.

In your child theme’s CSS:

– For the small pink/blue repeating image, which will be behind the feather/mask image:

html{
background:transparent url("https://www.akashawacha.co.uk/wp-content/uploads/2012/08/your_repeating_pink-blue_image.png") fixed center top repeat;
}

– For the feather/mask/etc. image:

body{
background:transparent url("https://www.akashawacha.co.uk/wp-content/uploads/2012/08/your_feather-mask_image.png") fixed center top repeat-y;
}

In having the feather/mask image repeat on the y-axis (vertically), you will see it if the browser window is higher than your initial image.