Menu
I have an background-image:url on my body in CSS. The problem is when I transition into mobile devices where the screen becomes portrait orientated. I have a different portrait orientated background I wish to use. Mainly, "portrait-orientated" in my case really just translates to mobile devices, not so much ipads/tablets. Mobiles are much more extreme with the difference between length and width so I want to link a different url in this case.
Idk if there's any way I could use Bootstrap's .hidden-xs/.visible-xs to accomplish this, that's just me thinking out loud, but if someone has a solution using this I'd be more than happy to hear it. This also would help since I'm using Bootstrap's navbar which changes into a touchscreen navbar when xs, meaning <768px, So I'd like to only change the background image when the navbar changes.
So any ideas? I'm a total newbie at this point, this is my first real project that isn't just isolated snippets. This might be something for Java but idk. I'd love any and all help.
Also a quick semi-related question, how do I handle background-position: center (-50px from the top). Should I just take the picture I want to use and add 50px of whitespace on top with paint or whatever then upload that? Or is the a way to set this is CSS?
263
Media Queries - Bootstrap Grid
You could have something like this on your own CSS:
@media (max-width: 300px) {
body {
background-color: red;
background-image: image-url("http://placekitten.com/g/200/300");
}
}
@media (min-width: 301px) and (max-width: 600px) {
body {
background-color: blue;
background-image: image-url("http://placekitten.com/g/400/600");
}
}
@media (min-width: 601px) and (max-width: 768px) {
body {
background-color: yellow;
background-image: image-url("http://placekitten.com/g/500/768");
}
}
@media (min-width: 769px) {
body {
background-color: green;
background-image: image-url("http://placekitten.com/g/800/1048");
}
}<body>
html body
</body>Use @media queries to write window size specific css. Example:
@media (min-width: 400px) {
.element {
background: #cccccc;
}
}
@media (min-width: 500px) {
.element {
background: #888888;
}
}
@media (min-width: 600px) {
.element {
background: #222222;
}
}
Here's is a Fiddle: http://jsfiddle.net/zhqn1vhh/
44
i do it like this using bootstrap. but Im sure it would work without bootstrap.
.class {
background-image: image-url("beach.jpg") ;
min-height:100%;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
-moz-background-size: cover;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
