Background image aligns to bottom of screen instead of page

  • Resolved axtran

    (@axtran)


    11 years, 11 months ago

    This is a very bizarre problem I’m having: I’m trying to align a background image to the bottom of my website, but it only goes to the bottom of the screen instead of to the bottom of the site. Here’s the code I’m using, seems pretty standard (a lot of the non-background code came with the theme I’m using:

    body {
    padding: 0 1.618em;
    font: 300 13px/20px “Helvetica Neue”, Helvetica, Arial, Sans-serif;
    color: #555;
    background-color: #fff;
    -webkit-font-smoothing: antialiased;
    background-image:url(‘https://www.axtran.com/wp-content/uploads/2013/03/ocean-waves5.png’);
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position: left bottom!important;
    }

    Sample page: https://www.axtran.com/contact/
    It’s a problem in Chrome, Safari and Firefox. I’ve searched far and wide but can’t find any mention of this elsewhere. Help is greatly appreciated!

Viewing 5 replies - 1 through 5 (of 5 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I don’t see such a strange problem.
    You have assigned both the <html> and <body> elements to have this background image.

    So that’s why it’s duplicating and appearing in two locations.

    Or am I missing the point here?

    Thread Starter axtran

    (@axtran)

    Thanks for the quick reply – I took out the html tag again (I kept tweaking the code to try to pinpoint the problem, you might’ve just loaded the site when I did that…)

    Here’s a screenshot to better explain what’s going on: https://i.imgur.com/J4plKZT.png

    When I load the page the image is at the bottom, but when I scroll down it just stays where it is (neither of which I want to happen, trying to get it to stick to the very bottom of the page always). I feel like I must be missing something extremely obvious….

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Try adding some CSS resets
    https://meyerweb.com/eric/tools/css/reset/

    I have the same exact problem but i’m building an horizontal webpage in wich i want a background image at the very right of the page and it is displaying the image at the right of the viewport (noooooo!).

    I have also searched for solutions but found none yet, mainly because i don’t think people are understanding the problem…

    @miguelsanto – please start your own thread – this one is resolved and CSS is entirely theme/site specific.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Background image aligns to bottom of screen instead of page’ is closed to new replies.