background: #344b68 url(../../data/img/template/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
Hello once again Stackoverflow, I have the following question.
Background.jpg is my websites background picture, wich is in 1080p resolution (1920x1080). On the border of the image, it fades to #344b68.
Viewing this on a 720p monitor will cause the picture to reduce in size using background-size: coverbut this will also be increased when viewing this on for example 1440p resolutions.
Now what I want to do is when it's a 720p monitor reduce the image' dimensions with background-size: cover to fit, but when its above 1080p, it stays the same dimentions and just fades in with the static background color (#344b68).
How can I do this, preferibly without JS?
Thanks in advance!
This looks like a job for Media Queries! These are a CSS3 feature that let you specify code to only activate when certain conditions are met. In your case, you want to query the window width:
/* normal styles */
.item-with-background {
background-size: contain;
}
/* overrides when screen is 720px wide or smaller */
#media screen and (max-width: 720px) {
.item-with-background {
background-size: cover;
}
}
Note: Media queries are supported in basically all the browsers (including mobile) except IE 6/7/8. If you REALLY need to have media queries in use in those browsers, there are some polyfills that hack-in that ability.
Related
I created a landing page for the website www.foscaintepidario.it
But I want the image on it to be centered, and remain centered, also when the browser-view is changed. Changed in the perspective of size, but also the switch from landscape to portrait and the other way around.
In het HTML/CSS I currently make a distinction between the portrait and landscape version, they both have their own image.
Hope you can help me.
you can use css background elements to have a clean view.
background-image: url(url to image);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
I finally solved it. The solution with the background-image works fine. The only thing I had to add was the height: 100vh parameter!
Thnx for your support
I've set an image to max-height:100%; of the browser window (with a small padding at the bottom), centred on the page. Currently, I'm having problems keeping the aspect ratio of the image from squashing when the browser is resized (interestingly it shows at the correct aspect ratio when refreshed after a resize).
I've set up an example in codepen. Would appreciate any advice on how to keep the ratio correct.
http://cdpn.io/sHJhl
UPDATE 18/08: I've updated the code in the copepen above. It's now working in all browsers except Chrome, which distorts the image when the browser is resized. Oddly it resizes fine in Chrome when the codepen is in edit mode. I've tested the code from the codepen in my development site and it shows the same issue, so it's definitely not a codepen quirk. Hoping someone can help on this one.
FURTHER UPDATE 18/08: Solved this issue with Chrome by adding max-width:100%, see answer below.
Solved this issue. The image needed max-width:100%; as well as max-height:100%; width:auto; to work in Chrome. I've updated the codepen to show the full working code: http://cdpn.io/sHJhl
Image's parent element .photo-bkg doesn't have any width set, so add it a width: 100%;
.photo-bkg { height:100%; width: 100%; }
That should do the trick.
You want to achieve a full page background right?
This worked for me:
html {
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;
}
source: http://css-tricks.com/perfect-full-page-background-image/
I am puzzled by what I am doing. First take a look at my tiny snippet:
HTML:
<div class="image_container"></div>
CSS:
.image_container {
background-image: url("images/wall.jpg");
height: 120px;
width: 100%;
}
What I am using above was to have a container with an image as a background that will take the entire width of the user's screen since I am using width: 100%. But on my 13 inch Mac it looks that way but when I go to a much larger screen the image shows partially but doesn't take 100% of the screen. Why is it that despite using width 100% it still won't take the entire width?
I tried to see if I can use background-repeat: repeat-x but that simply repeats the image and it looks terrible. What else can I do or is there another approach?
Because you set the width for the div, not the image. Try background-size: cover;
Oh...and container should actually be class.
I have a <div> with a background Image.
The <div> size may change over the time.
Is it possible setting the Divs Background image to fit the <div> size?
Lets say I have a div which is 400x400 and an Image which is 1000x1000, is it possible to shrink the image to 400x400 and therefore fit the <div> size?
If you'd like to use CSS3, you can do it pretty simply using background-size, like so:
background-size: 100%;
It is supported by all major browsers (including IE9+). If you'd like to get it working in IE8 and before, check out the answers to this question.
Use background-size for that purpose:
background-size: 100% 100%;
More on:
http://www.w3schools.com/cssref/css3_pr_background-size.asp
Use background-size property to achieve that. You should choose between cover, contain and 100% - depending on what exactly you'd like to get.
You can achieve this with the background-size property, which is now supported by most browsers.
To scale the background image to fit inside the div:
background-size: contain;
To scale the background image to cover the whole div:
background-size: cover;
Use this as it can also act as responsive. :
background-size: cover;
You could use the CSS3 background-size property for this.
.header .logo {
background-size: 100%;
}
Set your css to this
img {
max-width:100%,
max-height100%
}
Wanted to add a solution for IE8 and below (as low as IE5.5 I think), which cannot use background-size
div{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=
'/path/to/img.jpg', sizingMethod='scale');
}
This should work but will not keep the image aspect ratio:
background-size: 100% 100%;
how can i modified this plugin http://srobbin.com/jquery-plugins/backstretch/ to auto-keep the background ratio when windows is resize like http://css-tricks.com/examples/FullPageBackgroundImage/css-1.php.
i like the smooth fade effect in "backstrech" i would like to keep
this plugin but if anyone have a better plugin that does what i'm
looking for with the smooth effect between images.
Thanks
try to add this to your Css file
html {
background: url(../img/pattern.png) fixed, url(../img/background-image.jpg) 50% 50% fixed no-repeat;
-moz-background-size: auto, cover; /* Firefox 3.6 */
background-size: auto, cover; /* Chrome, Firefox 4.0+, Safari 4.1+, Opera 10+ and IE9 */
}