Multiple Responsive Background Images

[jenni]

Hello, I really need some help concerning multiple responsive background images.

 

I am creating a one page website with wordpress that contains of 6 sections and each should have a background image and over it should be some content (like text)

 

Well I have tried several things and in my latest version it scales the background image in proportion but it cuts some parts off the image when the browser window is smaller

               <div id="sec_5">			<div class="span5">			<div class="txt_left">				<h2>SOME CONTENT</h2>				<p>SOME CONTENT</p>			</div> <!-- ende div txt_left -->			</div> <!-- end span5 -->		</div> <!-- ende div sec_5 -->

#sec_5 {	padding-top:43,8%;	max-width:1920px;	height:auto;}.span5 {	background-size: 100% auto;	background-size: cover;	background-position: center center;	vertical-align: top;	background-image: url('images/page5_bg.jpg');}

I also tried to give the background-image a specific height but then of course if you scale it down- it works perfectly without cutting off the image- but the height remains...

 

 

I really don't know how to solve this issue!

I'd appreciate any help!! =)

[newseed]

When your shrunk your window size did you refresh the browser thereafter? If the problem persist then you might want to look into media query for css which will allow you to set specific background images for specific screen sizes.

 

@media screen and (max-width:640px) {/*add CSS here for phone devices*/}@

 

media screen and (max-width:1280px) {/*add CSS here for table devices and desktops*/}

 

media screen and (min-width:1281px) {/*add CSS here for desktops with high resolutions*/}

 

 

Here' the example of how you would code it:

 

media screen and (max-width:1280px) {

 

{ background-image: url('image/filename.jpg'); }

}

 

The code in bold is the media query and the css in red is what you put in between the two brackets. (note: there is an open and close bracket for the media query and another set for the css itself.

[jenni]

Hi, thanks for your response!!

 

I've tried working with media queries, especially to position the text- that works

unfortunately the background-images still get cut off when resizing the browser window...

 

maybe this could be cause because I have multiple background images- no I don't think so- I don't really get it

[davej]

Could you perhaps provide a direct link to your site, or maybe a simplified example of the problem using online images?

[jenni]

I have now worked with media queries and set up everything so it fits for the different specific screen sizes.

 

Though if I hadn't adapted the pictures the images get cut off.

 

This here is the site that I am referring to:Link