{"action":"created","issue":{"url":"https://api.github.com/repos/johnnypacia/project-1/issues/5","labels_url":"https://api.github.com/repos/johnnypacia/project-1/issues/5/labels{/name}","comments_url":"https://api.github.com/repos/johnnypacia/project-1/issues/5/comments","events_url":"https://api.github.com/repos/johnnypacia/project-1/issues/5/events","html_url":"https://github.com/johnnypacia/project-1/issues/5","id":115930396,"number":5,"title":"background & media queries","user":{"login":"johnnypacia","id":15057212,"avatar_url":"https://avatars.githubusercontent.com/u/15057212?v=3","gravatar_id":"","url":"https://api.github.com/users/johnnypacia","html_url":"https://github.com/johnnypacia","followers_url":"https://api.github.com/users/johnnypacia/followers","following_url":"https://api.github.com/users/johnnypacia/following{/other_user}","gists_url":"https://api.github.com/users/johnnypacia/gists{/gist_id}","starred_url":"https://api.github.com/users/johnnypacia/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/johnnypacia/subscriptions","organizations_url":"https://api.github.com/users/johnnypacia/orgs","repos_url":"https://api.github.com/users/johnnypacia/repos","events_url":"https://api.github.com/users/johnnypacia/events{/privacy}","received_events_url":"https://api.github.com/users/johnnypacia/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":{"login":"annarankin","id":11503403,"avatar_url":"https://avatars.githubusercontent.com/u/11503403?v=3","gravatar_id":"","url":"https://api.github.com/users/annarankin","html_url":"https://github.com/annarankin","followers_url":"https://api.github.com/users/annarankin/followers","following_url":"https://api.github.com/users/annarankin/following{/other_user}","gists_url":"https://api.github.com/users/annarankin/gists{/gist_id}","starred_url":"https://api.github.com/users/annarankin/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/annarankin/subscriptions","organizations_url":"https://api.github.com/users/annarankin/orgs","repos_url":"https://api.github.com/users/annarankin/repos","events_url":"https://api.github.com/users/annarankin/events{/privacy}","received_events_url":"https://api.github.com/users/annarankin/received_events","type":"User","site_admin":false},"milestone":null,"comments":2,"created_at":"2015-11-09T17:54:17Z","updated_at":"2015-11-09T20:32:40Z","closed_at":null,"body":"Howdie, \r\n\r\nTo prevent my CSS from breaking when resizing the window, I looked up how to use media queries on MDN and I'm finding it works for containing my `<div id=\"color-box-container\">` and also my `<div class=\"box\">`, BUT not for my body, which contains my background. So, while the div items stay in place, if you resize the window eventually the background starts to move and breaks the picture. Here's what my CSS looks like now: \r\n\r\n```\r\n\r\n/* MDN article on Media Queries:\r\nhttps://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries*/\r\n\r\n@media screen and (min-width: 1000px) {\r\n\r\nbody {\r\n    background: url('bassmanBackground.jpg') no-repeat;\r\n   /* background-attachment: fixed;*/\r\n    background-position: 30% 20%;\r\n    font-family: 'Nunito', sans-serif;200\r\n    height: 100%; \r\n    width: 100%; \r\n    text-align: center;\r\n    /*position: absolute;*/\r\n}\r\n\r\n  \r\n#color-box-container{\r\n  background-image: url('toneKnob.jpg');\r\n  height: 210px;\r\n  width: 100%;\r\n  margin: auto;\r\n\r\n}\r\n\r\n.box {\r\n  position: relative;\r\n  width: 23%;\r\n  height: 150px;\r\n  margin: 20px 0;\r\n  border-radius: 50% / 10%;\r\n  text-align: center;\r\n  text-indent: .1em;\r\n  opacity: 0.9;\r\n}\r\n\r\n\r\n}\r\n \r\n@media screen and (max-width: 999px) and (min-width: 480px) {\r\n\r\nbody {\r\n    background: url('bassmanBackground.jpg') no-repeat;\r\n    /*background-attachment: fixed;*/\r\n    background-position: 30% 20%;\r\n    font-family: 'Nunito', sans-serif;200\r\n    height: 100%; \r\n    width: 100%; \r\n    text-align: center;\r\n   /* position: absolute;*/\r\n}\r\n\r\n\r\n \r\n#color-box-container{\r\n  background-image: url('toneKnob.jpg');\r\n  height: 210px;\r\n  width: 100%;\r\n  margin: auto;\r\n\r\n}\r\n\r\n.box {\r\n  position: relative;\r\n  width: 23%;\r\n  height: 150px;\r\n  margin: 20px 0;\r\n  border-radius: 50% / 10%;\r\n  text-align: center;\r\n  text-indent: .1em;\r\n  opacity: 0.9;\r\n}\r\n\r\n  \r\n}\r\n```\r\nIs there anything I can do either using media-query or not to prevent the background image from continuing to change when the window is resized? "},"comment":{"url":"https://api.github.com/repos/johnnypacia/project-1/issues/comments/155184735","html_url":"https://github.com/johnnypacia/project-1/issues/5#issuecomment-155184735","issue_url":"https://api.github.com/repos/johnnypacia/project-1/issues/5","id":155184735,"user":{"login":"annarankin","id":11503403,"avatar_url":"https://avatars.githubusercontent.com/u/11503403?v=3","gravatar_id":"","url":"https://api.github.com/users/annarankin","html_url":"https://github.com/annarankin","followers_url":"https://api.github.com/users/annarankin/followers","following_url":"https://api.github.com/users/annarankin/following{/other_user}","gists_url":"https://api.github.com/users/annarankin/gists{/gist_id}","starred_url":"https://api.github.com/users/annarankin/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/annarankin/subscriptions","organizations_url":"https://api.github.com/users/annarankin/orgs","repos_url":"https://api.github.com/users/annarankin/repos","events_url":"https://api.github.com/users/annarankin/events{/privacy}","received_events_url":"https://api.github.com/users/annarankin/received_events","type":"User","site_admin":false},"created_at":"2015-11-09T20:32:40Z","updated_at":"2015-11-09T20:32:40Z","body":"Hey Johnny! Have you tried using the `background-size` property? There's a pretty good guide on MDN - I'm linking you to the [section on `contain` and `cover`](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Scaling_background_images#Special_values.3A_.22contain.22_and_.22cover.22)."}}