Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
You use CSS to achieve this.
You apply position: fixed to the desired element.
Have you a Child Theme or Custom Style plugin?
Thread Starter
aga1
(@aga1)
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?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Have you a link to your website or Pastebin.com of your HTML and CSS code for one relevant page?
http://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%;
}
Thread Starter
aga1
(@aga1)
Andrew,
No point: it’s the TwentyEleven theme, so far unmodified.
Robin:
Thanks, that’s great. I’ll give it a go:)
Moderator
Jan Dembowski
(@jdembowski)
Forum Moderator and Brute Squad
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
Thread Starter
aga1
(@aga1)
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…
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Can you link us to the page, or show us a Pastebin.com of HTML & CSS you’re using for that page?
Thread Starter
aga1
(@aga1)
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
I don’t see the difference in ‘stickiness’.
Thread Starter
aga1
(@aga1)
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… ???
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
How http://ocahostel.com.br/ works:
1
First this image loads as the background to the html element
http://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
http://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 “http://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("http://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("http://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.
