Making container responsive to any browser size

I am working on this website at http://testing.easource.com and I need some help with making the container adjust to the viewport so that the same amount of the background-image is seen no matter what size the browser is.(if it’s > 768px).

I want this much of background-image on the left and right of the container to be seen. http://quirktools.com/screenfly/#u=http%3A//testing.easource.com&w=1200&h=800&s=1

Right now now if I change the width of the browser to be 1280px a piece of the background-image is cut off and if I make it 1366px the container is too far apart from the background-image. I am sure there is a more efficient way of doing this than to add many @media queries.

Hi,

There are logic flaws in what you are asking. :slight_smile:

If you want the page to stay at the edge of those two columns of images then you would simply remove any width from the container and set a margin-left and right of about 150px.

e.g.


.container{
max-width:none;
margin:0 150px;
}

Of course that means you would need to recode your content to take account of that fluid with rather than the max-width of 1000px that you set.

You need to think logically about what you are asking and what you expect to happen. You can’t keep increasing the layout width unless you also increase all the inner containers to work well with the fluid width. Eventually though you will want a max-width as very wide layouts are not that easy to use.

For a max-width site that you have know your only real option is to repeat those two column image over the whole body background rather than in two columns and in that way it will not matter how wide the page is as the background will always be underneath - except that you see a little more of it on wider viewports. That’s how I would handle it anyway.

Thanks a lot. That solved my problem. I have one last question. What would be the best way for me to add a link to that background-image.

Hi,

Basically it sounds as though you want any part of the body background if clicked to be a link and you could do this by placing an anchor over the whole body.

e.g.


html,body{height:100%}
#left-link {
position: fixed;
top:0;
bottom:0;
left:0;
right:0;
z-index:99;
width:auto;
height:auto;
}

.container{
position:relative;
z-index:100;
}


You should remove your cursor: pointer styles from the wrap and container because that is very confusing as you can’t tell what is a link and what isn’t.

Thanks again Paul that worked exactly how I wanted it to. I forgot to ask if it would be possible to have my current background-image on http://testing.easource.com be divided so that it only covers the half of the webpage and then I can add another bg image to cover the other half of the page. I tried adjusting the ‘background-position’ but that didn’t help.

Hi,

You could do it with 2 elements like this:


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html, body {
	height:100%;
	margin:0;
	padding:0
}
.left, .right {
	position:fixed;
	top:0;
	left:0;
	bottom:0;
	width:50%;
	background:red url(left-image.png) repeat 0 0;
}
.right {
	left:auto;
	right:0;
	background:blue url(left-image.png) repeat 0 0;
}
.bg {
	position:fixed;
	top:0;
 	right:0;
	left:0;
	bottom:0
}
</style>
</head>

<body>
<div class="bg"> <a class="left" href></a> <a class="right" href></a> </div>
</body>
</html>