Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 8 of 8
  1. #1
    Junior Member
    Join Date
    Oct 2011
    Posts
    14
    Member #
    29740
    Liked
    1 times
    Hi there

    I have an image I want to make a background for a div on a webpage. In photoshop it says that the image is 850px high. But when I put it in the div, I have to give the div a height of 950px to show the full image.

    Is anybody familiar with this phenomenon?

    David.

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Need to see your code.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Junior Member
    Join Date
    Oct 2011
    Posts
    14
    Member #
    29740
    Liked
    1 times
    Oh great, thanks. It's a background image.

    HTML
    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Poscure</title>
    <link rel="stylesheet" type="text/css" href="styles/reset.css">
    <link rel="stylesheet" type="text/css" href="styles/style.css">
    </head>
     
    <body>
        <div class="container">
            <div id="main_image">
                <div id="navigation">
                    <p>Navigation goes here.</p>   
                </div>
                <p>Let me put some content here.</p>
            </div>
            <div id="main_text">
                <p>Some more text here.</p>
            </div>   
        </div>
    </body>
    </html>

    and CSS
    Code:
    body{
    }
     
     
     
    #main_image{
        background-color: red;
        width: 100%;
        height: 950px;
        background:url('../images/Lions.jpg') no-repeat center center fixed;
        /*background-size: cover;*/
    }

  5. #4
    Junior Member
    Join Date
    Jun 2013
    Posts
    4
    Member #
    36482
    Background-size:cover; must enable in css then it will work fine and give background-repeart::no repeart; then it work fine

    Thank you !

  6. #5
    Junior Member
    Join Date
    Oct 2011
    Posts
    14
    Member #
    29740
    Liked
    1 times
    Why would it work with background:cover enabled? I disabled it to try and troubleshoot the problem and it had no effect on it. I'm pretty new to CSS, but I thought that the "no-repeat" in the background: rule refers to background-repeat: already. Is this true? If so, do I really have to explicitly make background-repeat: no-repeat;? Also, I tried all you said and no change.

    David.

  7. #6
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    I think he was taking a shot in the dark to try to help you. Have you posted all of the code, or just the relevant bits?

    Put this at the top of your CSS and see if it helps:
    Code:
    *{margin:0;padding:0;}
    If it works, it isn't the solution, but it will help as a troubleshooting step. If it doesn't work, you'll need to upload the page somewhere so I can take a look at it that way.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  8. #7
    Junior Member
    Join Date
    Aug 2012
    Posts
    13
    Member #
    32471
    div
    {
    background-image:url('smiley.gif');
    background-repeat:no-repeat;
    background-size:cover;
    }

    but is for css3, it will work definitely

  9. #8
    Junior Member
    Join Date
    Nov 2013
    Posts
    4
    Member #
    37656
    You don't have set the height. I left that out in my declaration and let the height be automatic while the width conforms to that of its parent


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 06:19 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com