0

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!

pasine
  • 11,311
  • 10
  • 49
  • 81
user2962676
  • 3
  • 1
  • 2
  • Borrowing from Cameron, you have to use `absolute position` for that effect, also some media queries to hide the text in smaller windows. That is the easiest solution. If you want to do it like nois3, it seems like they have used padding to position the text and hides the first block of text for smaller windows. Give me a jsfiddle, and I'll be able to help you with code. – Samia Ruponti Apr 04 '14 at 04:37

1 Answers1

0

Use a div with CSS, position:absolute;

Also the problem has been answered here:

css - Floating div positioning

Community
  • 1
  • 1
Cameron
  • 632
  • 9
  • 24
  • 1
    I see how that will help, and it is very important which is why I thumbs'd it up.. All I did was remove the max-width and gave my heroImg a width of 100%. Thank you both for answering. Much Appreciated! – user2962676 Apr 11 '14 at 03:02