Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Have both a fixed AND center bottom background

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #150657
    modiophile
    Participant

    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.

    #150658
    Mag
    Participant

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

    #150680
    Paulie_D
    Member

    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.

    #150757
    Paulie_D
    Member

    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.

    #150766
    Paulie_D
    Member

    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.

    #150787
    Mag
    Participant

    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:)

    #150789
    mdmoreau
    Participant

    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)
  • The forum ‘CSS’ is closed to new topics and replies.