/    Sign up×
Community /Pin to ProfileBookmark

css background image issue

Copy linkTweet thisAlerts:
Jul 20.2014

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;
}[/CODE]

[code=html]<div id=”bottom-container”>
[/code]

to post a comment
CSS

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@jsebeanJul 20.2014 — 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.
Copy linkTweet thisAlerts:
@ytesfay80authorJul 20.2014 — 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.[/QUOTE]

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.
Copy linkTweet thisAlerts:
@ytesfay80authorJul 21.2014 — Any help someone?
Copy linkTweet thisAlerts:
@DannyAJul 21.2014 — 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=&#8203;"container boxed-container" style=&#8203;"margin-bottom:&#8203; 100px;&#8203;">&#8203? 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!
Copy linkTweet thisAlerts:
@deathshadowJul 22.2014 — 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;
Copy linkTweet thisAlerts:
@ytesfay80authorJul 23.2014 — 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=&#8203;"container boxed-container" style=&#8203;"margin-bottom:&#8203; 100px;&#8203;">&#8203? 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![/QUOTE]

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.
Copy linkTweet thisAlerts:
@crowd54Aug 06.2014 — Cross check with other sites may be it will help you
×

Success!

Help @ytesfay80 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...