/    Sign up×
Community /Pin to ProfileBookmark

background images for different screen resolutions

Copy linkTweet thisAlerts:
Sep 10.2010

Hello, I have been asked to build a website which will have a large background image. I know how to do this but before I get started I still struggle a bit with different screen resolutions. My question in particular is what is the best size of image to use for such a website. Here is a link to a site I like very much for an example. [url]http://www.hagit-tassa.com/[/url]

At this point I will not be doing the site as flash. Thanks for the help in advance.

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@WebJoelSep 15.2010 — You should be able to specify just one parameter of the background-image in [B]percent[/B] and the image will re-size not only on different default resolutions but also if the client manually re-size up-or-down their browser viewport.

I've done this before. I don't recall now if there was a javascript involved or not, but if you encounter problems post back and I'll try to find the example I did. Just remember that you must declare either the weight [I]or[/I] the height of the image that will appear in the constrained container, and this be image must be stated in [B]percent[/B] (not pixels, etc.)
Copy linkTweet thisAlerts:
@slaughtersSep 16.2010 — If your image is blurred like the background in the example you posted then WebJoel is correct - just make the img size be 100% width, but I think this has to be done in a IMG tag, not part of a CSS background-image attribute.

<div>

<img scr='bck.jpg' style=position:absolute;width:100%' />

</div>

Should do it if you place this inside a DIV (note: The 'position:absolute' on the IMG tag is important as it is prevents the IMG from pushing the content down below the image) .

To show content on top of the img just place another div inside it and add a Z-Index value so the first part of the content is not hidden behind the img

<div>

<img scr='bck.jpg' style='position:absolute;width:100%' />

<div style='z-index:1'>This is Content</div>

</div>
Copy linkTweet thisAlerts:
@catfishauthorJun 04.2011 — I had decided not to use the background image but now I am trying to figure it out again. I have the image in place and it seems to be adjusting width wise as I wanted but some of my content is not showing. You will see here just the navigation and the left column are visible. I tried to add a z-index of 10 to the container but it didn't do anything. Here is my code and link if you wouldn't mind helping again that would be wonderful, thankyou.

http://www.catfishwebcreations.com/background/index.php

html
[code=html]</head>
<body>
<div>
<img src="images/pitt_lake_with_cresent_moon__&_flood.jpg" style="position:absolute;width:100&#37;;height:661;>
<div style="z-index:1">This is Content</div>
</div>

<div id="navigation">
<div class="menu">
<?php include("drop_menu.php"); ?>
</div>
</div>
<div id="container">
and then of course the rest of it[/code]

CSS

[CODE]/* CSS Document */
html {
font-family: Verdana, Arial, Helvetica, sans-serif;
}

body{
margin: 0px;
padding: 0px;
font-size:13px;
color: #000;
background-color: #c37c8a;
}

#container{
width:900px;
margin:0 auto;
background-color: #f5f5dc;
border:1px solid #666;
border-top:none;
}[/CODE]
Copy linkTweet thisAlerts:
@Major_PayneJun 06.2011 — It's NOT the screen resolution that matters. It is the browser's viewport size at any resolution that matters. Unless you implement CSS 3, which is not fully supported yet, you'll have to use code like for this 100&#37; Background Image.

Optional JQuery One
Copy linkTweet thisAlerts:
@catfishauthorJun 06.2011 — Thankyou for your reply. I seem to have it working finally. Thought I would share so here is the code now

[code=html]</head>
<body>
<div>
<img src="images/pitt_lake_with_cresent_moon__&_flood.jpg" style="position:absolute;width:100%;height:661;">
<div style="z-index:1">This is Content</div>
</div>

<div id="navigation">
and the rest[/code]
×

Success!

Help @catfish 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.6,
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,
)...