/* Responsive Full Background Image Using CSS
* Tutorial URL: http://sixrevisions.com/css/responsive-background-image/
*/
body {
/* Location of the image */
background-image: url(images/background-photo.jpg);
/* Image is centered vertically and horizontally at all times */
background-position: center center;
/* Image doesn't repeat */
background-repeat: no-repeat;
/* Makes the image fixed in the viewport so that it doesn't move when
the content height is greater than the image height */
background-attachment: fixed;
/* This is what makes the background image rescale based on its container's size */
background-size: cover;
/* Pick a solid background color that will be displayed while the background image is loading */
background-color: #464646;
/* SHORTHAND CSS NOTATION
* background: url(background-photo.jpg) center center cover no-repeat fixed;
*/
min-width: 100%;
max-width: 100%;
min-height: 100%;
max-height: 100%;
}
/* For mobile devices */
#media only all and (max-width: 768px) {
.logo {
/* The file size of this background image is 93% smaller
* to improve page load speed on mobile internet connections */
background-image: url(images/background-photo-mobile-devices.jpg);
height: 300px;
width: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
}
The background image shows up fine on a desktop browser but when I view it on my iphone 6 plus or any other mobile phone the image doesn't scale correctly and is partially cut off. Can anyone help? Thanks.
There are two ways to work on the background and make it work well:
You should delete the onset:
min-width: 100%;
max-width: 100%;
min-height: 100%;
max-height: 100%;
And
height: 300px;
width: 100%;
The first way to make the length or width is supported on the other by adding the following code:
background-size: 100% auto;
The second way to make the rear rubber with any size by adding the following code:
background-size: 100% 100%;
Thank you
Also you can use or add for more optimization:
html{
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
it will cover the all html or body base on the tag you want the image to cover.
Related
I'd like to have a background image on my homepage that is full width on desktop, but as the screen size shrinks, less and less of the right hand side of the image should disappear (but always shows the left hand edge and the objects in the left hand of the image).
The CSS code I have for this is as follows;
.sm-img-bg-fullscr {
background-position: 0% 0px;
background-size:auto;
width: 100%;
display: block;
position: relative;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
background-repeat: no-repeat;
}
and the html where this class is called is as follows;
<div class="sm-img-bg-fullscr parallax-section" style="background-image: url(assets/system/backgroundimage.jpg)" data-stellar-background-ratio="0.5">
I have tried adjusting the background-size variables, and the background position variable, but with no luck. The image being used is 1920 x 1080.
I would like to know what combination of CSS parameters will allow the full image to be shown when the screen width is large enough, and have it remove more and more of the right hand side of the image as the screen size is narrowed, making only the left hand side of the image visible.
Why don't you use media queries to adjust the image background on certain screen sizes?
All we are doing is adjusting the background-position.
body {
margin: 0; padding: 0}
*{
box-sizing:border-box}
.image {
width:100vw;
height:100vw;
background-image:url("https://upload.wikimedia.org/wikipedia/commons/9/94/Cirrus_clouds_mar08.jpg");
background-repeat:no-repeat;
background-position:center center;
background-size: cover
}
#media only screen and (min-width:1px) and (max-width:700px) {
.image {
background-position:left center;
}
}
<div class="image">
</div>
Di you tried this?
background-position: center;
Try this in your CSS
{background-size: auto;}
or try inline style using max-width: ??.px
!my present design**i have designed a website like this.
**
it is working fine for my screen resolution. the bottom div is half way up on the background image and half way down from the background image. my problem is when i test this for higher resolution screen it is not looking the same. the image is moving down. this is my css
body
{
background: #ffffff url(../images/11.jpg) no-repeat center top 0%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: 100% 75%;
font-family: Arial;
}
the bottom div css
.banner {
width: 100%;
min-height: 300px;
height: 100%;
background-color: #ffffff;
}
how to set this same for all screen sizes.
You say the image is moving down, do you mean when you scroll the image moves but you want it static? If so you could add background-attachment:fixed; to the body's CSS.
That's because the proportion of the image doesn't let the image fit the whole screen.
set the
body {
...
width : 100%;
height : 100%;
}
I have an image background for a div that I want to show on different devices, The problem is that I have to give height of the image in order to fit it correctly. Now on different phones, I have to adjust the height with different px. forexample on iphones 65px works for portrait mode but not for landscape and etc. Is there a way that the div just gets resized in height to cover 100% of the background image?
here is my code
<style>
div.testing {
height: 95px;
background-image: url(/myimageurl);
background-repeat: no-repeat;
background-size: 100%;
}
#media screen and (max-width: 320px) {
/* iphone portrait */
div.testing {
height: 65px;
}
}
#media screen and (min-width: 321px) and (max-width: 480px) {
/* iphone portrait */
div.testing {
height: 80px;
}
}
</style>
<div class="testing"> </div>
You could use background-size: cover;
.thing {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
but why are you using a background-image? if you can use a regular image, you could do it like this:
.thing {
width: 100%;
max-width: [your biggest width];
}
.thing img {
display: inline-block;
width: 100%;
height: auto;
}
ALSO
I would recommend flipping your mindset on the max-width and start small screen first, using min-width and getting bigger.
And you don't really need div.testing - it can just be .testing
And if you are using a background image for a good reason... you should investigate making the div -
.thing {
height: 0;
padding-bottom: 30%; /* play with this */
}
This will keep the proportions... but it's only useful in specific cases.
A complete jsfiddle with an actual image would be useful.
Good luck!
Nest your div inside the background div and set the height to 100%
I want to create a perfect full background image that is static and that fills the viewport, no matter what the size of the screen(viewport) is.
So I use the following CSS:
body, html{
width: 100%;
height: 100%;
background: url('http://ns223506.ovh.net/rozne/d4857d4e0f68027e7af6b70d5488b7e6/wallpaper-751328.jpg') no-repeat center center fixed;
margin: 0;
padding: 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Now the problem is...As far as I understand, when the viewport size exceeds the size of the image, the image will stretch and will pixelate...
How can I prevent the max size being passed?
Also, what is the best way to approach this screen size problem when you want to cater for retina display resolutions? Set a max-width on the body, html elements?
Thank You
You can use #media queries to decide till what resolution you want the image to cover the entire page, if the resolution gets bigger, either replace it with another image, or simply use center value for background position and a background color, if you are not looking to cover the image after certain resolution, this will prevent the image to get pixelat.. For example
Demo (Resize the fiddle window for desired effect)
html, body {
height: 100%;
width: 100%;
}
body {
background-image: url('https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-frc1/p480x480/1231_381212385330183_1145397211_n.jpg');
/* If it exceeds 699px width, you can also replace the image here... */
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#media all and (max-width: 699px) {
body {
background-color: #000;
background-image: url('https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-frc1/p480x480/1231_381212385330183_1145397211_n.jpg');
background-size: 200px 200px;
background-repeat: no-repeat;
background-position: center center;
}
}
Note: I've used #media all and (max-width: 699px) and background-size: 200px 200px here in this example
just for demonstration purposes, you can replace this with original
height/width of your image and the desired resolution for #media rule
In my page have 2-3 sections that have 100% width and background. When I open it on full screen everything is ok but when the screen is smaller than 960px (width of content in this sections) background image is not the entire page. The right side whis is hidden in firtst moment haven't background - it's white. You can see what I mean here: http://micobg.net/10th/
Simply add the background-size:100% style to the element where you applied background-image. Works in Firefox, Safari, and Opera. For example:
<style>
.divWithBgImage {
width: 100%;
height: 600px;
background-image: url(image.jpg);
background-repeat: no-repeat;
background-size: 100%; //propotional resize
/*
background-size: 100% 100%; //stretch resize
*/
}
</style>
<div class="divWithBgImage">
some contents
</div>
Regarding to this article, you should to use cover as well:
html {
background: url(PATH_TO_IMAGE) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Use background min-width:960px; instead of width:100%;
Cheers