background images for different screen resolutions

**catfish** · 09-10-2010 11:40 AM

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. http://www.hagit-tassa.com/

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

**WebJoel** · 09-14-2010 07:53 PM

You should be able to specify just one parameter of the background-image in percent 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 or the height of the image that will appear in the constrained container, and this be image must be stated in percent (not pixels, etc.)

**slaughters** · 09-16-2010 05:52 PM

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>

**catfish** · 06-04-2011 12:04 PM

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

HTML Code:

</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

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;
}

**Major Payne** · 06-05-2011 10:51 PM

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% Background Image.

Optional JQuery One

**catfish** · 06-06-2011 09:11 AM

Thankyou for your reply. I seem to have it working finally. Thought I would share so here is the code now

HTML Code:

</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

Thread: background images for different screen resolutions

Thread Tools

Display

background images for different screen resolutions

body background images

[solved]

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions