-6

I found two good examples here, http://mattfarley.ca/# and https://popper.js.org/.

The background image only working for their first section, but it is responsive with any dragging of browser size. How can I achieve that?

My thought is using Jquery to get the current size, then set to the background section one?

Thanks in advance!

Joey Don
  • 19
  • 2
  • Do you mean how it fills up the entire screen? – George Aug 16 '17 at 08:02
  • 6
    Maybe spend 5 seconds to type your question in google, and then read a bit? SO is not code my task for free, nor a free tutorial website. Do not come here with a task expecting somebody to solve it and give it to you. Please try to solve the problem yourself and if you face an issue, then come ask a question with some example. Thanks! – N. Ivanov Aug 16 '17 at 08:03
  • Possible duplicate of [Responsive css background images](https://stackoverflow.com/questions/12609110/responsive-css-background-images) – rakwaht Aug 16 '17 at 08:33
  • @George yes.. And when people change the size of Windows, it still fits. But if people scroll down,then entering into another section – Joey Don Aug 16 '17 at 09:43

2 Answers2

2

add these css and do not add image margin, height and width. Hope it works 

background-image: url(image_url_here);
background-repeat:no-repeat;
background-size:contain;
background-position:center;
Anil Shrestha
  • 1,180
  • 11
  • 16
1
body {
    background-image: url( defaultBackground.png);
}

@media all and (max-width: 767px) {
    body {
        background-image: url( smartphoneBackground.png);
    }
}

First set a default background image in your css file. After that set a background for smartphones with a media query.

Swittmann
  • 81
  • 1
  • 12