Issue
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?
Solution
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/
Answered By - Anupam Basak
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.