www.webdeveloper.com
Results 1 to 4 of 4

Thread: Gradient background image problems

  1. #1
    Join Date
    Jun 2012
    Posts
    5

    Question Gradient background image problems

    I want to use an image with gradient as a background I made the following code.Problem with this code is this that background is not covering all the content, please help me to fix this problem.



    <html>
    <style type="text/css">
    body
    {margin:0 auto;
    width:790px;
    background-image:url('1.jpg');
    background-repeat:repeat-y;
    }




    </style>
    <body>


    <h1>
    hello world!!
    hello world!!
    hello world!!
    hello world!!
    hello world!!
    hello world!!
    hello world!!
    hello world!!
    hello world!!
    hello world!!
    hello world!!

    </h1>



    </body>

    </html>

  2. #2
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,112
    Can't do anything without seeing the image. Attach the image file or post to a server so we can see it.
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

  3. #3
    Join Date
    Mar 2011
    Posts
    1,137
    I suspect that what you're seeing is that the background image is only drawn behind the content of your <h1> tag. And since that's the total content of the document, that would be correct. An HTML document does not, by default, expand to fill the entire browser window unless your CSS settings specify it. Add 'height:100&#37;;' to the style for the <body> tag and you may see the effect you want. And don't forget to add a complete <!DOCTYPE> statement to ensure cross-browser compatibility.
    Rick Trethewey
    Rainbo Design

  4. #4
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,208
    Try:

    Code:
    <style type="text/css">
    body {
    width:790px;
    height: YYYpx; /* optional if content isn't enough */
    margin:0 auto;
    background: #fff url('1.jpg') repeat-y top left scroll;
    }
    </style>
    Need to set a width and height if there is not enough content to expand background (BG) image to where you want it. The BG image is only in the vertical so assume it is a gradient sliver with a width of 790px.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles