Grow your CSS skills. Land your dream job.

[Solved] Have both a fixed AND center bottom background

  • # 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:11 am

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

    That div would then require its own background, it seems to have no affect on the child background… http://cdpn.io/EadIu

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

    I have and it either takes one or the other based on order. http://cdpn.io/bzEng

    # 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:32 am

    Yeah, what I mean by that is when you scale the window down the background image begins to slide down like this http://i.imgur.com/sctNNDI.png?1

    What I want to happen is once the image is fully exposed 100% I don’t want it to start moving down in order to fulfill the “background-position: center bottom” declaration.

    hmmm, I’m realizing what I’m asking for is contradictory…I think what I’m going to do is add a media query that nullifies the “background-position: center bottom” once fully exposed.

    # 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 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".