WordPress.org

Ready to get started?Download WordPress

Forums

How do I do get this effect? (29 posts)

  1. Aga1
    Member
    Posted 2 years ago #

    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...

  2. Andrew
    Forum Moderator
    Posted 2 years ago #

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

    Have you a Child Theme or Custom Style plugin?

  3. Aga1
    Member
    Posted 2 years ago #

    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?

  4. Andrew
    Forum Moderator
    Posted 2 years ago #

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

  5. cinghaman
    Member
    Posted 2 years ago #

    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%;
    }
  6. Aga1
    Member
    Posted 2 years ago #

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

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

  7. 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. ;)

  8. cinghaman
    Member
    Posted 2 years ago #

    Jan, Aga already mentioned that

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

  9. Aga1
    Member
    Posted 2 years ago #

    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...

  10. Andrew
    Forum Moderator
    Posted 2 years ago #

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

  11. Aga1
    Member
    Posted 2 years ago #

  12. Andrew
    Forum Moderator
    Posted 2 years ago #

    I don't see the difference in 'stickiness'.

  13. Aga1
    Member
    Posted 2 years ago #

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

  14. Andrew
    Forum Moderator
    Posted 2 years ago #

    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.

  15. cinghaman
    Member
    Posted 2 years ago #

    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%;
    }
  16. Dave
    Member
    Posted 2 years ago #

    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.

  17. Aga1
    Member
    Posted 2 years ago #

    OK, I've tried RoseAndMoon's solution, as it seemed to me to be 2 images rather than one, and this method seemed to make the most sense.

    Interesting results:)

    It all worked, sort of... but... the actual background remains in place! So what I now appear to have is a bottom layer of my tiled pattern, a middle layer of the white background, and a top layer of my 'feathers' transparent png.

    See http://www.akashawacha.co.uk/

    So, how do I get rid of/turn off the background colour?

  18. cinghaman
    Member
    Posted 2 years ago #

    body.custom-background {
    background-color: #FFFFFF;
    }

    line 71
    remove it

  19. Aga1
    Member
    Posted 2 years ago #

    My stylesheet for the TwentyEleven theme doesn't have a line 71, nor any reference I can see to a "custom" background.

    Line 71 is blank.
    Line 72 says body {
    padding: 0 2 em;
    }

    Line 38 is
    body {
    background: #fff;
    line-height: 1;
    }

    Is this the one?

  20. cinghaman
    Member
    Posted 2 years ago #

    r u using ft-media-image (plugin)

  21. Aga1
    Member
    Posted 2 years ago #

    No. Plugin for what? There's no WordPress plugin called that.

  22. Dave
    Member
    Posted 2 years ago #

    Try this:

    #custom-background-css body.custom-background{
    background-color: transparent !important;
    }
  23. cinghaman
    Member
    Posted 2 years ago #

    there is that plugin ft-media-image-widget in your plugin folders

    and if u can do a site wide search for this class
    body.custom-background

    you should be able to see the background-color

  24. Dave
    Member
    Posted 2 years ago #

    Also, look under Appearance > Background to see if there is a color entered in the Display Options > Background Color field.

  25. Dave
    Member
    Posted 2 years ago #

    Oops... this should read:

    body.custom-background{
    background-color: transparent !important;
    }
  26. Aga1
    Member
    Posted 2 years ago #

    Sorry, you're not making any sense.

    How do I do a site-wide search?

    What's that plugin got to do with anything?

  27. cinghaman
    Member
    Posted 2 years ago #

    r u using dreamweaver ?
    if yes
    click on wp-content folder (ctrl+f) and add body.custom-background

    i did a firebug and it shows that plugin and i think this class is from that plugins css

  28. Aga1
    Member
    Posted 2 years ago #

    RoseAndMoon, that worked perfectly! Many thanks indeed!

    Robin, Thanks too for your help.

  29. Dave
    Member
    Posted 2 years ago #

    There are other things you must do...

    If you scroll all the way down, you will notice that your feather/mask image starts to disappear at the bottom. This is because of this:

    #page {
        margin: 2em auto;
        max-width: 1000px;
    }

    The 2em bottom margin does this, so alter it to read:

    #page {
        margin: 2em auto 0;
        padding-bottom:2em;
        max-width: 1000px;
    }

    ...this should correct this.

    Also, make sure all your alterations are in your Child Theme.

Topic Closed

This topic has been closed to new replies.

About this Topic