WordPress.org

Support

Support » Themes and Templates » How do I do get this effect?

How do I do get this effect?

  • Hi,

    I found this website:
    http://ocahostel.com.br/

    I really like how the background image seems comprised of 2 layers: a base layer (the sackcloth), and a second layer (the feathers) that “sticks” to the sides of the body, and is mirrored. I’m assuming there’s 2 layers, as the sackcloth seems to load before the feathers do, but I’m only guessing.

    Does anybody know how I’d go about doing something similar? Thanks…

Viewing 15 replies - 1 through 15 (of 28 total)
  • Moderator Andrew Nevins

    @anevins

    Forum moderator

    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?

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    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%;
    }

    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

    Volunteer Mod. & 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

    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…

    Moderator Andrew Nevins

    @anevins

    Forum moderator

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

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    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… ???

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    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%;
    }
    Dave

    @roseandmoon

    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.

Viewing 15 replies - 1 through 15 (of 28 total)
  • The topic ‘How do I do get this effect?’ is closed to new replies.