Jump to content
Sign in to follow this  
jenni

Multiple Responsive Background Images

Recommended Posts

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 :P 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!! =)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 :Unsure:

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...