/    Sign up×
Community /Pin to ProfileBookmark

center awide image

Copy linkTweet thisAlerts:
Oct 22.2010

Hi,

i was wondering how to have always centered a wide image on my screen.
i mean basically web users have a screen resolution 1024×768 (at least…).
if i have a div horizontally centered, in which i have all my website texts, and i have a wide image e.g. 2000×500, how to make this image always center with my main text div ?
it’s to say if web user have a screen resolution 1280×1024 my text and my image seem to be still centered together but user see more of my image on both side.

thanks a lot,

A.

to post a comment
CSS

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@JavaboeyOct 22.2010 — In CSS,

#id or .class {

margin: 0 auto;

}
Copy linkTweet thisAlerts:
@Major_PayneOct 23.2010 — You are using a non-standard width image causing people on small screens to scroll horizontally. This will cause very few people to stay on your web site.

Centering:

Centering anything requires setting a width less than 100% for the container. Example:

body {

width: 950px;

height: 600px;

margin: 0 auto;

background: #fff url(path to non-tiled image) no-repeat center scroll;

}

Change parameters as you need. Set "#fff" to background color you want. Set "scroll" to "fixed" if you want page contents to scroll over background image. CSS was given for an image that does not tile.

If you have a small image and want it to fill the entire browser window, see these sites for examples of code to use:

Background to Fit Screen II: http://paynelessdesigns.pastebin.com/f760990b

http://www.cssplay.co.uk/layouts/background

http://www.scriptdungeon.com/freejavascript/freescripts1284

http://css-tricks.com/perfect-full-page-background-image/
×

Success!

Help @alain 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.19,
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,
)...