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;
}
}
Related
I am making a site using HTML and CSS but my background image is not responsive
for small devices like mobile its not resizing as I decrease the size of windows
my CSS code for the image is like this:
body{
background-image: url(image.jpg);
background-size: cover;
border-image-repeat: no-repeat;
}
You need to look at using media queries, they are used in css to define certain screen sizes.
I recommend having a look here: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
I would also recommend for images to have them in multiple sizes, you don't want to squash a large image onto a mobile size canvas, you should separate them into mobile/tablet/desktop
#media only screen and (max-width: 768px) {
/* For mobile phones: */
body {
background-image: url(mobile_image.jpg);
background-size: cover;
border-image-repeat: no-repeat;
}
}
You can use the same image to scale based on the size of the browser window:
background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;
/* it is used when the browser or screen size is below 767px */
#media only screen and (max-width: 767px) {
body{
background: url(image.jpg)no-repeat;
background-size: cover;
background-position: center;
}
}
I have a responsive background image here and it works well in most screen sizes, however, on the iPad/tablet size it clips the edge of the windmill blades.
Here is the CSS I am using for the space:
background: url('/image/background-img.jpg') no-repeat;
width: 100%;
background-position: 0% 25%;
background-size: cover;
background-position:center;
background-repeat: no-repeat;
How can I continue to fill the background but not clip the image?
It's the expected behavior of background-size:cover. It displays the image as small as possible, making sure it covers all the element and cutting off (cropping) the excess.
You'll want to adjust the min-height of your element until you are happy with the result. To keep it from being cut (too much). To keep it from interfering with how it looks on different screens, you might want to wrap your special rules for tablets in a specific #media query. Example:
#media (max-width: 991px) and (orientation: landscape) {
.jumbotron {
min-height: 62vw;
}
}
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 */
}
Not a a native english speaker so there's probably a better way to shape the question...anyway:
What I want to create is similar to the header here: http://thegreatdiscontent.com/adam-lisagor
The header image is shown fully in all screensizes, and the aspect-ratio of the image is of course always correct.
This is made using an and getting the text to appear on the using position: absolute.
But if you use css for the background-image instead of an , you'll get something like this header: http://elegantthemes.com/preview/Harmony/
Resize browser to see parts of the background being left out.
Is it possible to make a a div look and behave like the first link, using the background-image css property like on the second link?
Or do I have to change how my entire header works and use the for the background for it to show fully in all screensizes?
I would like to have a header background that doesn't leavy anything out, but is fixed like this http://getflywheel.com/
Only idea so far is to make a transparent png that has the correct ratio of the image, and then use background-image that has background-attachment:fixed. But this doesn't seem very smart.
Hopefully I was clear enough that I'll get understood. Thank you all very much in advance!
Here is a nice and simple tip with only css/html:
Ingredients
Transparent PNG image with the desired ratio
(transparent-ratio-conserver.png)
tag
Different images for different view-ports (retina.jpg, desktop.jpg,
tablet.jpg...)
The idea is to open an tag and to assign to it a transparent image (with our desired ratio). We also add class="responsive-image" that's all in HTML.
<img src="img/transparent-ratio-conserver.png" class="responsive-image">
In the CSS, we set background-size to fit the and we choose the width of our image.
.responsive-image{
width: 100%;
background-size: 100% 100%;
}
and finally, we serve for every view-port the right image:
/* Retina display */
#media screen and (min-width: 1024px){
.responsive-image{
background-image: url('../img/retina.jpg');
}
}
/* Desktop */
#media screen and (min-width: 980px) and (max-width: 1024px){
.responsive-image{
background-image: url('../img/desktop.jpg');
}
}
/* Tablet */
#media screen and (min-width: 760px) and (max-width: 980px){
.responsive-image{
background-image: url('../img/tablet.jpg');
}
}
/* Mobile HD */
#media screen and (min-width: 350px) and (max-width: 760px){
.responsive-image{
background-image: url('../img/mobile-hd.jpg');
}
}
/* Mobile LD */
#media screen and (max-width: 350px){
.responsive-image{
background-image: url('../img/mobile-ld.jpg');
}
}
You can download the demo from here.
This is done with the background-size property:
background-size: cover;
Cover will make the image as small as it can be, whilst still covering the entirety of its parent, and maintaining its aspect ratio.
You may also want to try contain, which makes the image as big as it can be whilst still fitting inside the parent.
Source(s)
MDN - background-size CSS property
I think theres a better solution than contain or cover (which dind't work for me, btw).
Here's an example I recently used for a logo:
#logo{
max-width: 600px;
min-height: 250px;
margin: 0 auto;
background: url(../images/logo.png) no-repeat center;
background-size: 100%;
}
So now we have a responsive div with a backgound image, which size is set to the full width of the div.
Although there are other solutions.
% will scale the div to image size or the aspect ratio.
.responsive-image{
width: 100%;
background-image: url(x.jpg);
background-repeat:no-repeat;
background-size: 100% 100%;
}
You just need to pass the height to width ratio to the element.
For an image 1400x600;
1400:600 = 98:42
span( style="padding-bottom:42%;
width:98%;
background:url('/images/img1.jpg');
background-size:contain;
display:inline-block;")
would display the same as
img(src="/images/img.jpg" style="width:98%;")
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;
}
}