...

View Full Version : Trying to get a background to fit any screen size



causticthespian
02-03-2012, 01:34 AM
I recently registered with tumblr and I'm trying to get a custom made background image to fit neatly with the columns on any screen size. It currently looks just fine on my 1920x1200 resolution, but it's all wrong on my tiny laptop!

The image is here: http://img20.imageshack.us/img20/9383/hsbgsml.png
And my tumblr is: causticthespian.tumblr.com

How do I code it so that the columns and the image will line up nicely on all computers?

Thank you!

webdev1958
02-03-2012, 01:44 AM
One option is to split up your image to suit the background for each column. Then for each column, instead of setting a background image, which will not resize according to browser window size, use an <img> with width = 100% in each column as the background. You will then need to use css postioning to make the <img> the background layer in the column. Then the <img> will automatically resize to 100% of whatever the column width is at any particular time.

causticthespian
02-03-2012, 01:46 AM
That sounds like it would work really nicely, though I don't really know how to approach coding it! Could you give me an idea of how I'd set up each column individually like that? I'm still sort of new to this. :]

webdev1958
02-03-2012, 02:16 AM
A quick and simple demo - works in my IE8 and FF3.5.18



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css">
#wrapper {
width: 80%;
margin: 0px auto 0px auto;
padding: 0px 0px 0px 0px;
}
#col1, #col2, #col3 {
position: relative;
width: 33%;
float: left;
}
.bgImg {
width: 100%;
}
.colContent {
position: absolute;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="col1">
<img class="bgImg" src="pic1.jpg" />
<div class="colContent">Column 1 content goes here</div>
</div>
<div id="col2">
<img class="bgImg" src="pic2.jpg" />
<div class="colContent">Column 2 content goes here</div>
</div>
<div id="col3">
<img class="bgImg" src="pic3.jpg" />
<div class="colContent">Column 3 content goes here</div>
</div>
</div>
</body>
</html>

causticthespian
02-03-2012, 03:24 AM
I can't seem to get this to work on tumblr. Whenever I add this into the coding, everything goes entirely out of whack. Would it help if I posted the tumblr coding here? 'cause I think I'm putting it in the wrong place, or maybe there's another way to do it.

sean3838
02-03-2012, 04:49 AM
In your css for the site put background-size:100%; for the class where your background is in. Then in your head section put:



<!--[if lt IE 9]>
<body><div class="IEbg"><img src="" style="width:100%; height:100%; z-index:-5000" top="0" left="0" /></div></body>
<![endif]-->


(put your image url in the img src=""):



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum