I have a simple bootstrap 3 page with a <div class="container"> for the body.
I would like to put a background image on the page, that best fits around this main container.
I can make images for each "responsive level" of bootstrap.
What is the best way to achieve this ?
Thanks.
Just use normal image background and design your background images so that graphics of the image follow the container width size (1170px lg container, 970px)...
body {
background: url('link/to/your/image_mobile.jpg') no-repat scroll center top;
}
#media (min-width: 768px) {
body {
background: url('link/to/your/image_tablet.jpg') no-repat scroll center top;
}
}
#media (min-width: 991px) {
body {
background: url('link/to/your/image_small_desktop.jpg') no-repat scroll center top;
}
}
#media (min-width: 1200px) {
body {
background: url('link/to/your/image_large_desktop.jpg') no-repat scroll center top;
}
}
Your background image would look somethink like this:
Related
http://www.ontargettdesign.com
Hi,
I am having problem with the navigation bar and the logo when the webpage is resized to ipad size:
[IMG]http://i60.tinypic.com/4r95qo.png[/IMG]
How can I code it to be a narrower height, I feel I have tried everything!
Any help would be very much appreciated.
Thanks in advance
Your Media Queries are clipping the image. This is because the div you have is smaller than the background image being used. If you remove the "width" & height" the logo will display properly. To view this. Make you browser smaller to see the clipping occur (Because of #media). Right click on the logo and "inspect element". On the right or bottom it will show you the css that is applied to this image. You can toggle the css to see how the code effects your image.
either add background-size:contain; to both of the follow or remove the width and height.
#media (max-width: 979px) and (min-width: 769px)
.navbar-brand {
height: 32px;
width: 132px;
}
&
#media (max-width: 768px)
.navbar-brand {
height: 32px;
width: 132px;
}
To change make the navbar height the same across all media widths you will still have to mess with the media widths. Your standard height is "height: 76px;".
The first CSS is for the smallest possible screen
#media (max-width: 768px)
.navbar {
height: 76px; /* add this */
}
This is the second smallest screen (for tablets). You will not to get rid of the clear:both that is sending the navigation to the second line
#media (max-width: 979px) and (min-width: 769px)
.navbar-collapse {
float: none;
clear: both; /* DELETE THIS */
height: 100px; /* You can change this to 76px if you want to be consistent */
}
I have a homepage with a large background image set top and center. The image is 780px high.
(I am using Bootstrap on Joomla T3 framework)
This looks great on an HD screen and even at slightly lower resoluions, but when you get down to tablet / phone screen size this simply takes up too much space - People would have to scroll down a page or more to get to content.
Here's the CSS:
.homepage {
background: #fff url("../images/home_back.jpg") no-repeat top center;
}
I would like to do keep the image but perhaps scale it down for lower resolution screens. Ideally, the background would simply shift up, so that it just never takes up more than 3/4 of the screen...
In short, is there a way to have the background go to a minus-y position relative to the screen width and height?
EDIT:
Browser support required:
All current main desktop browsers, and very importantly, iPad + Android tablets.
.homepage {
background: #fff url("../images/home_back.jpg") no-repeat top center;
background-size: cover;
}
OK here's the solution that worked best for my needs. Thanks guys for the advice:
#media all and (max-width: 1920px) and (min-width: 980px) {
.homepage {
background: #fff url("../images/home_back.jpg") no-repeat top center;
}
}
#media all and (max-width: 979px) and (min-width: 480px) {
.homepage {
background: #fff url("../images/home_back.jpg") no-repeat top center;
background-size: auto 550px;
}
}
I have been stuck on this problem for hours:
I'm trying to make the position of an image fixed when the window is resized to under 820px.
I need this because the image will overlap important text in the header (same color).
The CSS:
#banner {
background:url(path/to/image) no-repeat 100%;}
#media screen and (max-width: 819px) {
#banner {
background:url(path/to/image) no-repeat x y z;}
}
I have tried using '820px' and 'fixed', but this clearly does not work.
Try
#media screen and (max-width: 819px) {
#banner {
background:url(path/to/image) no-repeat x y z;}
z-index:-10;
}
Actually, adjust the z-index as needed
I'm having trouble nailing down a solution to this.
I have a div with a repeating background image that's 100% across the screen. So lets say:
.services_wrap {
width:100%;
height:200px;
background:url('../images/services_tile.png') repeat-x;
}
<div class="services_wrap">
//Content
</div>
How do I specify a media query that will scale that entire div down when the screen is resized, like for a normal div it would be:
#media screen and (max-width: 650px) {
/*Makes the logo shrink*/
#header {
height:auto;
}
}
But If I try this with .services_wrap nothing happens.
I have tried background-size: properties with no luck.
Is it possible to scale a repeating image?
Use background-size
div {
background: url("//www.placehold.it/50x50") repeat-x;
}
#media screen and (max-width: 900px) {
div {
background-size: 25px;
}
}
Demo
Is it possible in CSS to handle the position of a background image depending of the dimension of the browser page, or should I use javascript to handle that?
When the image is bigger than the page it should be aligned to the left
When the image is smaller than the page it should be aligned to the center
Media queries - they change CSS styles dependent on browser size.
#img {
width: 1000px;
margin: 0 auto;
}
#media
screen and (max-device-width: 1000px),
screen and (max-width: 1000px) {
#img {
float: left;
margin: 0;
}
}