www.webdeveloper.com
Results 1 to 8 of 8

Thread: css background image issue

  1. #1
    Join Date
    Dec 2013
    Posts
    57

    css background image issue

    If you go to easource.com and scroll to the bottom of the page you will only see part of the background image I tried inserting. There is a layer that is covering most of the background image. I tried inspecting with firebug to try and remove that layer. Can someone help me find out where this problem is occuring?

    This is the css code and html code for the image.

    Code:
    #bottom-container {
    background-image: url('http://easource.com/wp-content/uploads/2014/07/felix.jpg');
    background-position: 0% 105%;
    background-repeat: repeat-x;
    cursor: pointer;
    }
    HTML Code:
    <div id="bottom-container">

  2. #2
    Join Date
    Jul 2014
    Posts
    3
    What's the issue, you want the image to be the background for that entire div or just tiled at the bottom.

    FWIF, in inspect element in Chrome, I set #bottom-container a height of 100% and changed background-position to 0% 100% rather than 105, since that sort of "slides the image" off the div, if that makes sense?

    So eg.

    #bottom-container {
    background-image: url('http://easource.com/wp-content/uploads/2014/07/felix.jpg');
    background-position: 0% 100%;
    background-repeat: repeat-x;
    cursor: pointer;
    height: 100%;
    }

    Is that what you wanted, or did you want the background tiled over the entire div? If so, remove the line background-repeat: repeat-x.

  3. #3
    Join Date
    Dec 2013
    Posts
    57
    Quote Originally Posted by jsebean View Post
    What's the issue, you want the image to be the background for that entire div or just tiled at the bottom.

    FWIF, in inspect element in Chrome, I set #bottom-container a height of 100% and changed background-position to 0% 100% rather than 105, since that sort of "slides the image" off the div, if that makes sense?

    So eg.

    #bottom-container {
    background-image: url('http://easource.com/wp-content/uploads/2014/07/felix.jpg');
    background-position: 0% 100%;
    background-repeat: repeat-x;
    cursor: pointer;
    height: 100%;
    }

    Is that what you wanted, or did you want the background tiled over the entire div? If so, remove the line background-repeat: repeat-x.
    No. I wanted the image to be all the way at the bottom of the page but if I put the bg position past 100% the image starts to go underneath that layer and become cut off. I want to know what that white layer is and how can I remove it. If it can't be removed then how can I place the image on top of it.

  4. #4
    Join Date
    Dec 2013
    Posts
    57
    Any help someone?

  5. #5
    Join Date
    Jul 2014
    Posts
    2
    the white area at the bottom is caused by the margin-bottom that has been applied to the first div class inside the #bottom-container. If you have a look you will see it has a 100px margin (<div class=​"container boxed-container" style=​"margin-bottom:​ 100px;​">​) The quickest way to get the effect you want is to create a div and have it set at the bottom of the page and work from there. This is how I would quickly resolve the issues until I could properly fix it!

  6. #6
    With no repeat-y, what exactly are you expecting a position of 100% or more to do? Even at 100% you shouldn't be seeing ANY of the background, as it's slid COMPLETELY off the element (or should be!). That's what 100% does! Think about it, if at 0% it's at the top, and 100% is the height of the element it's applied to... see the problem here?

    Did you mean like 95%? How about instead of percentages you do:

    background-position:bottom left;

  7. #7
    Join Date
    Dec 2013
    Posts
    57
    Quote Originally Posted by DannyA View Post
    the white area at the bottom is caused by the margin-bottom that has been applied to the first div class inside the #bottom-container. If you have a look you will see it has a 100px margin (<div class=​"container boxed-container" style=​"margin-bottom:​ 100px;​">​) The quickest way to get the effect you want is to create a div and have it set at the bottom of the page and work from there. This is how I would quickly resolve the issues until I could properly fix it!
    Thanks a lot Danny that fixed the problem but now I have a new problem.

    If you scroll down all the way to the bottom on http://easource.com you will see that the #bottom-container image can not be completely seen. I want to decrease the height of the container so that the #bottom-container bg image can be seen in its entirety.

  8. #8
    Join Date
    Aug 2014
    Posts
    1
    Cross check with other sites may be it will help you

Thread Information

Users Browsing this Thread

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

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