Ehy there! Can anyone advise how to get the background image totally responsive regardless which device is on?
Or if the screen is on portrait mode or landscape?
Right now the image I have it covers well the iPad page when is in landscape mode, but is way too short when the screen goes on portrait mode.
This is what i came up with after having tried everything including height: auto; width: auto;
#home {
background-image: url('london-pic.jpg');
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
position: relative;
height: auto;
max-width: 100%;
min-height: 720px;
overflow: hidden;
}
You defined min-height: 720px for some container, so this container won't be higher than 720px. To cover whole screen you should define e.g:
max-width: 100%;
min-height: 100%;
or
min-height: 100vh.
(use % if parent container have defined height, in other way use vh).
Related
I have an image inside a header div. I set the background-size: 100% 100% but on mobile devices, it isn't scaling at all. I'd like to keep the image the same across all devices. Here is the full CSS:
background: url(Oly1600x600.jpg) no-repeat center center;
background-size: 100% 100%;
height: 600px;
position: relative;
overflow: hidden;
I've tried using the background-size: cover and it zoomed the entire image in, cutting off a lot from the top and bottom. What I mean by scaling is, I would like the original image to be shown across all devices, such as desktop browser, mobile device and tablet. If it cannot be shown completely, then the image shouldn't be distorted, i.e stretched. Hope that clears some things up.
EDIT: Here's the link to the page: https://www.heroesjourney.com/olympic-weightlifting
Any suggestions?
Using 'background-size: cover;' should solve your scaling problems, i assume you want the image to fill the container without blank space and that's exactly what cover does.
try this: background-size: cover;
.img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
link:-http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
or
#header img{
max-width: 80%;
}
I have one problem that I can't solve, I need my banner to be full width, not boxed. For example: the page is 1024px witdh and my banner is 800px width, now i need my banner to be 100% width. If you understand me, so, my friend and me we was trying a lot of options but we didnt figured it out.
Here is my CSS code with banner:
#banner{
background-image: url(mats/banner.jpg);
width: 100%;
height: 470px;
background-repeat: no-repeat;
position: relative;
background-position: center;
display: block;
}
I have tried everything but nothing successful.
It is background-size.
background-size: 100%;
On applying this property, your background image(800px width) would strech to 1024px, which results in image quality loss.
Better applying this property on images with width > 1200px
If the height: 470px is also intended as background height, dont use it.
Never set height & width on a image, it changes the aspect ratio. If one is set, the other will auto adjust according to, else Images looks shrinked or stretched
I think you might missing background-size
#banner{
background-image: url(mats/banner.jpg);
background-size: 100%;
width: 100%;
height: 470px;
background-repeat: no-repeat;
position: relative;
background-position: center;
display: block;
}
I had made a full screen background image for one of my clients, but the problem is that when I make the image to fit all the screen using the following css codes:
#bg-image img{
position:fixed;
left:0;
top:0;
width:100%;
max-height: 100%;
}
#bg-image{
height: 100%;
width: 100%;
float: left;
overflow: hidden;
position: relative;
}
Everything works perfect, as the image is filling all the background of my home page, but the problem is that now the background image seems to be stretched, and I would like to know how to make my image is size or ratio to be correct in order to fit the whole screen size without getting stretched (with full quality), so that the background image is quality to be perfect.
So, how to make my image to fit perfectly on the background of my home page.
Any Help Would Be Very much Appreciated!
You should really look into the background size property instead of using fixed images. Using 'cover' for background-size, means that the image should grow or shrink just enough to cover the whole background.
If you know the dimensions of the image. You can use a media query to change the background-size to 'auto' when it would otherwise grow beyond it's original size.
html, body {
min-height: 100%;
}
body {
background-image: url(http://leydenlewis.com/images/LANDING_PAGE.jpg);
background-repeat: no-repeat;
background-position: 0 0;
background-size: cover;
}
#media (min-width: 1120px), (min-height: 630px) {
body { background-size: auto; }
}
Try doing something like this:
#bg-image {
position:fixed;
left:-50%;
top:-50%;
width:200%;
height: 200%;
}
#bg-image img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
This should get you the results you want and work in most browsers as well.
This should keep the image the correct ratio:
#bg-image{
height: auto;
width: auto;
float: left;
overflow: hidden;
position: relative;
}
<style>
body {
background: url(http://37.media.tumblr.com/tumblr_lusitdffhf1qj5tnlo1_r1_500.gif);
background-size: 320px 600px;
background-repeat: no-repeat;
padding-top: 40px;
}
</style>
Since the questions doesn't specifically state CSS only (or NOT Javascript), here is a jQuery solution that I've worked out and have been using. I've noticed there might be an issue with mobile browsers.
//resize the background image
function resizeImage($selection){
//get the ratio of the image
var imageRatio = $selection.width() / $selection.height();
//get the screen ratio
var screenRatio = $(window).width() / $(window).height();
//if the image is wider than the screen
if(imageRatio > screenRatio){
$selection.height($(window).height()); //set image height to screen height
$selection.width($(window).height()*imageRatio); //set the correct width based on image ratio
}
//if the screen is wider than the image
else{
$selection.width($(window).width()); //set the image width to the screen width
$selection.height($(window).width()/imageRatio); //set the correct image height based on the image ratio
}
}
Run this whenever you want to resize the image, typically on "onresize" and "onload"
<body onresize="resizeImage($('#bgImage'))">
#bg-image{background: url(https://unsplash.com/photos/P3IJy9JMsiU/download?force=true) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}
http://graduateland.com/
How do i prevent the images from compression. When I reduce the size of my browser window, the image get compressed side way, it's like the human head being compressed.
Looking at that website as an example, the image size isnt affected when screen size changes, only the position of the image changes. How do i do that?
Current CSS
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
If you want images to be resized when the window shrinks, just change height: 500px to height: auto in the CSS you posted. This will force images to keep their original ratio as the width changes. The way your code works right now is that it resizes the image horizontally so it is never wider than its container, but has a fixed height, which messes up the aspect ratio once it begins to shrink horizontally.
If you want the image to stay the same size and just move position as the browser window shrinks you need to apply them as a background-image. Try this CSS code on the container div you want to apply the image background to:
#container {
background: url(path/to/image.jpg) no-repeat center top;
}
On the site you linked they are appyling this CSS
display: table;
width: 100%;
height: 100%;
margin-top: 0;
padding-bottom: 0;
background-image: url("a/image.jpg");
background-repeat: no-repeat;
background-position: center center;
background-size: 100%;
onto a div. But there are great inspector tools which can inspect that for you, so don't ask if you have a 'living' example.
You should particularly have a look at the background properties.
Here's the answer:
Responsive Images with CSS
CSS:
max-width:100% !important;
height:auto;
display:block;
Use #media, like:
#media screen and (max-width: 1280px) and (max-height: 1024px) {
.splash {
background-image: url('../img/splash-1280.jpg');
}
}
#media screen and (min-width: 1281px) and (max-width: 1920px) and (max-height: 960px) {
.splash {
background-image: url('../img/splash-1920.jpg');
}
}
In their CSS:
#media (max-width: 1280px)
[id="get-started"] {
background-size: auto;
background-position: center top;
}
Which overrides:
background-position: center center;
background-size: 100%;
I am using foundation 4 as a framework for my personal site (not 100% portfolio site, more as advertising myself as a freelancer) and I have a contact box with a background image set and these CSS styles applied:
#contact-box {width: 1052px;
height: 400px;
background-image: url('../images/contact-bg.png');
margin-top: 150px;}
I want to make it so it scales down when you shrink the browser, but instead it just gives me a horizontal scrollbar and doesn't scale at all and I know it's because of the 1052px width set... So how would I code this out so it's responsive? If I use max width and max height it breaks the div and removes its bg image. The contact box has a contact form in it (which is responsive) along with a phone number, email, and 3 social icons.
I wanted to just leave a comment but I don't seem to have the option..
I don't know if this is the answer you want but I usually make background images scale to the window size with code like this:
width: 100%;
height: 400px;
background-image: url('../images/contact-bg.png');
background-size: 100%;
margin-top: 150px;
You can use that css code for div tags and the page body, although in my experimentation the width and height values are not necessary for the page body. Doing it this way will maintain the aspect ratio of your background image and should allow it to scale with the window.
Since the above example maintains the aspect ratio, the image will scale vertically to the point where it exceeds the size of the container it is in and will appear to be cut off on the bottom. Alternatively you can use:
width: 100%;
height: 400px;
background-image: url('../images/contact-bg.png');
background-size: 100% 400px;
margin-top: 150px;
The second argument for the background-size element will make sure the image never scales vertically at all. This method however will result in your background image being horizontally stretched whenever the window's width exceeds the aspect preserved width of the image you are using.
Hope this helps! :)
You can try this and modify it your according source taken from here http://css-tricks.com/perfect-full-page-background-image/
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
#media screen and (max-width: 1024px) { /* Specific to this particular image */
img.bg {
left: 50%;
margin-left: -512px; /* 50% */
}
}
and this is another method for doing this
#contact-box{
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;
}
Set the width of #contact-box to width: 100%.