Dynamic Div background image resizing (bootstrap)

Question

So what im trying to do is, a responsive design with multiple images that resize with each other, same size always.

In the green area, I want to have two images that span the width of the window and have the height for both auto and the max height is 300px for div 1, where as div 2 is just overflowed in the y.

The big problem I'm getting is I'm unable to use divs for both, I have to use an img tag for the second image but I want to place content within the second div tag.

Div 1 - repeating x background, Div 2 - an image, Inside div 2 - content

If you need any further clarification just ask, thankyou.

Edit: The headerBackground doesn't show up as the height of 300px that I need it to, but the height needs to resize down for headerBackground the same as headerImage but it can't scale up through 300px

.headerBackground{
	background-image: url('image1.png');
	min-width: 100%;
	height: auto;
	max-height: 300px;
	overflow-y: hidden;
}

.headerImage{
	background-image: url('image2.png');
	height: auto;
	display: block;
	min-width: 100%;
}

<div class="headerBackground">
	<div class="headerImage">
		<!-- content in here -->
	</div>
</div>

please add your code. Have you tried anything to do by yourself? — AleshaOleg
Hey, I just added some code that I've tried using but thats the basic in how it should work — Bob

MacFaf MacFaf · Accepted Answer · 2015-08-22T10:44:36

You can try with:

background: url('image1.png') no-repeat center center;   
background-size: cover;

It will:

Fill the entire div with the image (no white space);
Scale image as needed;
Center image in div.

Source: w3schools

Dynamic Div background image resizing (bootstrap)

1 Answers