Dynamic background resizing in webpage

Question

Desktop View

Mobile View I am not able to figure out how can I decrease the height of cloud background according to the image so that even when on mobile, the hand is always touching the cloud background bottom edge.

HTML:

    <div class="slidersection">
     <div class="sp-photo">
      <div class="sp-photo-content">
       <a target="_blank" href="https://play.google.com/store/apps/developer?id=IDSstudio"><img style="border:0;" src="images/slider/slogan.png" alt="IDSstudio" class="centered"></a>
      </div>
     </div>
    </div>

CSS:

.sp-photo {
position: relative;

margin: 0px auto;

width: 100%;
max-width: 1000px;

min-width: 100%;

height: 500px;
}

.sp-photo-content {
background: url(../images/slider/back.jpg) no-repeat scroll 0 0;

position: relative;
width: 100%;

/* background-size: cover; */
height: 100%;
overflow: hidden;
background-position: center;
}

img.centered {display:block; margin-left: auto; margin-right: auto;}

.slidersection {
display: block;
padding-top: 80px;
background: rgba(255, 255, 255, 0);
}

You may do better to restructure it using multiple background images. See, e.g., [this discussion](http://css-tricks.com/stacking-order-of-multiple-backgrounds/). — Ryan Mitchell, Jul 21 '14 at 00:40

score 0 · Answer 1 · answered Jul 21 '14 at 00:37

0

At a quick glance:

use a media query to remove the height:500px so that the .sp-photo-content div conforms to the height of the image.

@media screen and (max-width: 640px){
  .sp-photo-content{height:auto;}
}

set the background size of the image to fit the width of the screen and position at the bottom

.sp-photo-content{
  background-size: 100% auto;
  background-position: center bottom; 
}

This would be much easier with a jsfiddle to play with ;)

answered Jul 21 '14 at 00:37

Dan

774
5
11

p.s. the background size and position css should be included inside the selector in the first media query. – Dan Jul 21 '14 at 00:38

score 0 · Answer 2 · edited May 23 '17 at 11:50

0

I believe you need to use JQuery (JavaScript) in this case, there are limitations in CSS.

try this link: How to resize an image to fit in the browser window?

edited May 23 '17 at 11:50

Community

1
1

answered Jul 21 '14 at 00:37

James Yang

11
1

score 0 · Accepted Answer · answered Jul 21 '14 at 09:26

I did this to solve the issue:

CSS:

.sp-photo {
position: relative;

margin: 0px auto;

width: 100%;
max-width: 1000px;

min-width: 100%;

}



.sp-photo-content {
background: url(../images/slider/back.jpg) no-repeat scroll 0 0;

position: relative;
width: 100%;

/* background-size: cover; */
overflow: hidden;
background-position: center bottom; 

}

score -1 · Answer 4 · answered Jul 21 '14 at 01:01

Do you want the background image to be 100%? If that's the case, you could do this:

.sp-photo-content {
    background: url(../images/slider/back.jpg) no-repeat scroll 0 0;
    position: relative;
    width: 100%;
    height: 100%; 
    overflow: hidden;
    background-position: center;
    background-size: 100%;
}

However, a better way to do this would be to use media queries in your css to separate some of the css for mobile and for desktop. I would also suggest uploading a smaller version of that image for mobile - it'll be a hefty size for the mobile browser to download.

The below code shows how you would write the media queries:

/*for the phone - assuming back-mobile.jpg is the clouds background with a size of 480px */
@media only screen and (max-width : 480px) {
    .sp-photo-content {
        background: url(../images/slider/back-mobile.jpg) no-repeat scroll 0 0;
    }
}

/*for everything else */
@media only screen and (min-width : 481px) {
    .sp-photo-content {
        background: url(../images/slider/back.jpg) no-repeat scroll 0 0;
    }
}

Dynamic background resizing in webpage

4 Answers4