/    Sign up×
Community /Pin to ProfileBookmark

image-slice that goes 100% of the browsers

Copy linkTweet thisAlerts:
Dec 28.2009

i would like to have a div that would contain a image that would stretch when the browser is big.

i can only get it to do it on the body

[CODE]
body {

background-image: url(images/tesdt.png);
background-repeat: repeat-x;
background-color: #ffffff;

}
[/CODE]

i want to be able to do the same thing with this

[CODE]
#navigation {

float: left;

height: 45px;

width: 1240px;

background-image: url(images/test1.png);

background-repeat: repeat-x;

[/CODE]

to post a comment
CSS

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangDec 29.2009 — Remove [I]width [/I]from #navigation
Copy linkTweet thisAlerts:
@webevelopersFTWauthorDec 29.2009 — yea, i have tried that and it didn't work. :-(
Copy linkTweet thisAlerts:
@FangDec 29.2009 — Give a link or full code.
Copy linkTweet thisAlerts:
@webevelopersFTWauthorDec 29.2009 — its not live cant give you a link. i kinda figured out what is going on though just dont know how to fix it.

its because i have a

body div

container div

header div

content div

nav div

the container is getting in the way of allowing it to go 100% because i have the containers width set at 1024. if i close the container div it allows it to do what i want.



the look im going for is the header div to be 100% of the browser

then content in a div

then a nav div that is 100% of browser again

some more content

and then a footer div that is 100% of the browser
Copy linkTweet thisAlerts:
@webevelopersFTWauthorDec 30.2009 — Can anyone help me out on this?
Copy linkTweet thisAlerts:
@monkee98Dec 30.2009 — well instead of setting the exact width try changing it to 100% because that works when i make pages, but if you only need the image as big as the browser try adding the css code [code=html]
#BGImage
{
z-index: -00001;
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}
[/code] and then add anywhere in the body tag [code=html]<img id="BGImage" src="piccie.png">[/code] this always seems to work for me in all browsers
Copy linkTweet thisAlerts:
@lindsayanngDec 31.2009 — There is a simple solution to those... Start the container div AFTER the header.. it will contain all of the middle content but not the header so that can span the whole width of the website..
×

Success!

Help @webevelopersFTW 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 6.1,
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,
)...