Search code examples
htmlcssresponsive-designbackground-attachment

A fixed background image, with text (and also responsive)

I've been trying to figure something out, but no luck. I have also been searching the internet for possible solutions but again, no luck.

Let's say I wanted an image with text to stay fixed in the background while the user scrolls down while viewing a site, how can I go about this? (also being responsive).

I've tried doing many things but the text goes outside of the image that is in the background when the window size is resized, when I wanted it stay in the background image.

 html5
    ===========


           <body>
            <header id="head">
            <!--head content-->
            </header>
            <div class="fixedImage">
               <div class="welcome">
                   <h1>Welcome to this site</h1>
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo, enim eu posuere commodo, elit mauris condimentum sem.</p>
               </div>
            </div>
            </body>


        css
        ======
    #head{
       width:100%;
      background-color:#FFFFFF;
    }

    .fixedImage{
     background-attachment:url(img/random.jpg);
     background-size: 100%;
     background-repeat:no-repeat;
     background-attachment:fixed;

}

             .welcome{
                /*styling goes here*/
    }

A huuuuuuuge example of what I want to do is this:

http://www.nois3.it/

The image that is fixed right at the top, with text in it and it does not pour out of the image when resized.

If any one can please help me with this darn thing, that would be amazing!

thank you for your time!

Solution

  • Use a div with CSS, position:absolute;

    Also the problem has been answered here:

    css - Floating div positioning