Getting fluid background image within div?

Hello,

I’m trying to make a page layout which has a fixed left side column then right fluid column which holds an image background. When the page is resized, the image does not resize with it and is trapped in a large view after an inch increase or decrease in size? Any debuggers out there? :wink:

HTML:

<html>
	<body>
		<div id="leftcontent">
			<p> content and things for the client </p>
		</div>
		<div id="maincontent">
                        <p> this is where the photo should be </p>
		</div>
	</body>
</html>

CSS:

body {
	margin: 0;
	padding: 0;
	border: 0;
	height: 100%;
	max-height: 100%;
	font-family: 'Open Sans';
	font-size: .9em;
}

.clear {
	clear: both;
}

#leftcontent {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 300px;
	height: 100%;
	overflow: hidden;
	background: #171717;

}

#leftcontent h1 {
	text-transform: uppercase;
	text-align: center;
	font-size: 1.7em;
}

@media screen and (max-width: 670px) {
	#leftcontent {
		position: static;
		float: left;
		width: 100%;
		height: 12em;
		border-bottom: 1em solid #1B6B34;
	}
}

@media screen and (max-width: 500px) {
	#leftcontent {
		height: 15.5em;
	}
}

@media screen and (max-width: 380px) {
	#leftcontent {
		width: 380px;
	}
}

@media screen and (max-width: 670px) {
	#leftcontent h1 {
		font-size: 1.8em;
	}
}

#maincontent {
	position: absolute;
	top: 0;
	left: 300px;
	right: 0;
	bottom: 0;
	overflow: auto;
	background: url(image.jpg) no-repeat center center fixed;
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
}

@media screen and (max-width: 670px) {
	#maincontent {
		position: static;
		overflow: auto;
		width: 100%;
		height: 100%;
		border-left: none;
		clear: both;
	}
}

@media screen and (max-width: 380px) {
	#maincontent {
		width: 380px;
	}
}

It works for me. What browser are you using?

<!DOCTYPE html>
<html>
<head>


<style type="text/css">

body {
    margin: 0;
    padding: 0;
    border: 0;
    height: 100%; 
    max-height: 100%;
    font-family: 'Open Sans';
    font-size: .9em;
}

.clear {
    clear: both;
}

#leftcontent {
    position: absolute;
    top: 0;
    bottom: 0; 
    left: 0;
    width: 300px;
    height: 100%;
    overflow: hidden;
    background: #171717;

}

#leftcontent h1 {
    text-transform: uppercase;
    text-align: center;
    font-size: 1.7em;
}

@media screen and (max-width: 670px) {
    #leftcontent {
        position: static;
        float: left;
        width: 100%;
        height: 12em;
        border-bottom: 1em solid #1B6B34;
    }
}

@media screen and (max-width: 500px) {
    #leftcontent {
        height: 15.5em;
    }
}

@media screen and (max-width: 380px) {
    #leftcontent {
        width: 380px;
    }
}

@media screen and (max-width: 670px) {
    #leftcontent h1 {
        font-size: 1.8em;
    }
}

#maincontent {
    position: absolute;
    top: 0; 
    left: 300px;
    right: 0;
    bottom: 0;
    overflow: auto;
    background: url(http://www.placehold.it/500) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

@media screen and (max-width: 670px) {
    #maincontent {
        position: static;
        overflow: auto;
        width: 100%;
        height: 100%;
        border-left: none;
        clear: both;
    }
}

@media screen and (max-width: 380px) {
    #maincontent {
        width: 380px;
    }
}
</style>

</head>

<body>

<div id="leftcontent">
            <p> content and things for the client </p>
        </div>
        <div id="maincontent">
                        <p> this is where the photo should be </p>
        </div>


</body>

</html>

Hi @ralph.m I’m using Chrome, Firefox, and IE to test.

The problem is that I don’t want to have half the photo hidden behind the column on the left, if that makes sense?
The full image needs to be seen in full on the right fluid side and dynamically change in size as the browser screen changes.

Delete {background:fixed;}. It clashes with {background-size:cover;}
{background:fixed} is relative to the top, left corner of the window.

Cheers

Are you talking about position:absolute?
Because there is no code with background: fixed

EDIT: Found this and it didn’t change the effect

In what browser(s) and at what width(s) is the bg-image visible in the left column or otherwise disappearing under it?

Copy this code into a file and open it in your browser. Does it display the same problem?


<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>template</title>
<!--
http://www.sitepoint.com/forums/showthread.php?1209530-Getting-fluid-background-image-within-div
2014.05.21 19:39
Telo
-->
    <style type="text/css">
*, *:before, *:after {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
body {
    border:0;
    height:100%;
    max-height:100%;
    font-family:'Open Sans';
    font-size:.9em;
    padding:0;
    margin:0;
}

.clear {
    clear:both;
}

#leftcontent {
    border:1px solid lime;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    width:300px;
    height:100%;
/*    overflow:hidden;  /* */
    background:rgba(0,0,0,0);
}

#leftcontent h1 {
    text-transform:uppercase;
    text-align:center;
    font-size:1.7em;
}
/*
@media screen and (max-width: 670px) {
    #leftcontent {
        position:static;
        float:left;
        width:100%;
        height:12em;
        border-bottom:1em solid #1B6B34;
    }
}

@media screen and (max-width: 500px) {
    #leftcontent {
        height: 15.5em;
    }
}

@media screen and (max-width: 380px) {
    #leftcontent {
        width: 380px;
    }
}

@media screen and (max-width: 670px) {
    #leftcontent h1 {
        font-size: 1.8em;
    }
}
*/
#maincontent {
    position:absolute;
    top:0;
    left:300px;
    right:0;
    bottom:0;
    border:1px solid blue;
/*    overflow:auto;  /* */
    background:url(http://placehold.it/600x600/ffaaaa) no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
/*
@media screen and (max-width: 670px) {
    #maincontent {
        position: static;
        overflow: auto;
        width: 100%;
        height: 100%;
        border-left: none;
        clear: both;
    }
}

@media screen and (max-width: 380px) {
    #maincontent {
        width: 380px;
    }
}
*/
    </style>
</head>
<body>

<div id="leftcontent">
    <p> content and things for the client </p>
</div>
<div id="maincontent">
    <p> this is where the photo should be </p>
</div>

</body>
</html>


Hmmmm… It may be that you misunderstand what background:cover is supposed to do. The image is scaled to the smallest size that will completely cover the background positioning area. The aspect ratio of the image is preserved.

You might try {background-size:100% 100%} but the aspect ratio will not be preserved.