CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
User1038
User1038

Reputation: 455

how to make div background image responsive

How to make this image responsive

HTML:

<section id="first" class="story" data-speed="8" data-type="background">
    <div class="smashinglogo" id="welcomeimg" data-type="sprite" data-offsetY="100" data-Xposition="50%" data-speed="-2"></div>
</section>

CSS:

#first .smashinglogo {background: url(../images/logo1.png)  50% 100px no-repeat fixed;}

Upvotes: 25

Views: 117091

Answers (9)

Peter Schindler
Peter Schindler

Reputation: 306

What worked for me is to use the min operator within CSS:

.smashinglogo {
    width: min(80vw, 800px);
    height: min(20vw, 200px);
    display: block;
    position: relative;
    background: url(image.png) center;
    background-repeat: no-repeat;
    background-size: min(80vw, 800px), min(20vw, 200px);
}

In that case, my image was of size 800px by 200px and I wanted it to scale responsively (at 80% of the full browser window width in this example) but not be larger than the original size.

The same should work for the max operator if one wants to have a lower limit in background image size.

Upvotes: 0

Jesse Josserand
Jesse Josserand

Reputation: 1

If you div background-image disappears when stacked on small devices (typically below 577px in width), then add "min-height:310px;" to your css.

Upvotes: 0

Mandar Kawtakwar
Mandar Kawtakwar

Reputation: 107

#first .smashinglogo{
 background-image: url(../images/logo1.png);
 background-repeat: no-repeat;
 background-size: contain;
 background-position: 50% 50%;
}

try this, it might work for you.

Upvotes: 2

Neophile
Neophile

Reputation: 5880

I'm just summarising with an answer that helped me along the same lines.

.smashinglogo {
  max-width: 100%;
background-size:100% auto;
}

.smashinglogo {
  max-width: 100%;
background-size:cover;
}

Both the codes above worked really well.

Upvotes: 1

Nitesh
Nitesh

Reputation: 15779

Use background-size property to the value of 100% auto to achieve what you are looking for.

For Instance,

#first .smashinglogo{
   background-size:100% auto;
}

Hope this helps.

PS: As per your code above, you can remove fixed and add 100% auto to achieve the output.

Upvotes: 52

Alt-Rock Ninja
Alt-Rock Ninja

Reputation: 356

Instead of fixed Use

max-width:100%;

this will work.

Final Output

.smashinglogo {
  background: url(../images/logo1.png)  50% 100px no-repeat;
  max-width: 100%;
}

Upvotes: 2

Iraj
Iraj

Reputation: 1522

try this :

background-size:100% auto;

or 

background-size: cover;

Upvotes: 2

Kheema Pandey
Kheema Pandey

Reputation: 10285

Making a Responsive image there are many ways.

The Basic rule is use % value instead of pixel value. and second is use @media queries to target the mobile devices and tablets.

Also you can use CSS3 new technique to make the image responsive:

.img-element: {url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

you can read more about Responsive image by clicking on this link. http://css-tricks.com/which-responsive-images-solution-should-you-use/

Upvotes: 1

Sowmya
Sowmya

Reputation: 26989

Try adding background-size:cover

.smashinglogo {background: url(../images/logo1.png)  50% 100px no-repeat fixed;
  background-size: cover;
  height:600px
}

Check this tutorial for detailed article.

Upvotes: 7

Related Questions