Forums

Give help. Get help.

  • # September 19, 2013 at 9:29 pm

    Is it possible to have a background that is both fixed and positioned as described?

    For instance, utilizing both “background-position: fixed” and “background-position: center bottom” I don’t think the results are mutually exclusive.

    I want to be able to display the bottom part of my background image from the onset, but when the window scales, I don’t want the background image to slide down.

    Mag
    # September 19, 2013 at 10:01 pm

    What about putting this centered background inside div with position:fixed?

    # September 20, 2013 at 1:59 am

    What about putting this centered background inside div with position:fixed?

    Don’t like the sound of that….it feels ‘hacky’.

    For instance, utilizing both “background-position: fixed” and “background-position: center bottom” I don’t think the results are mutually exclusive.

    Have you tried it? That’s what Codepen is for!

    You might also look into background-attachment.

    # September 20, 2013 at 9:19 am

    I don’t think the results are mutually exclusive.

    Yeah, I kind of suspect that the cascade would be a problem.

    I confess, I’m not entirely sure what it is you expect to achieve, you do want to see the bottom of the image when the browser is full size AND when the browser is resized?

    Do I have that right?

    I think this was throwing me off:

    I don’t want the background image to slide down.

    # September 20, 2013 at 9:53 am

    Not sure a media query will help you there…they are based on width…not height.

    I feel a JS solution would be more likely.

    Mag
    # September 20, 2013 at 11:17 am

    There are media queries for height as well:
    http://stackoverflow.com/questions/11404744/media-queries-max-width-or-max-height

    And they can be mixed together:)

    # September 20, 2013 at 11:17 am

    Would something like http://codepen.io/anon/pen/znaqF work? It kind of plays off of Mag’s idea of having the separate, fixed position div – but in this case it’s all done using :before, keeping the HTML free of the extra element.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag