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
Related
How can i optimize the background image for any screen size in a phonegap application?
Thanks in Advance.
You can use SVG as image and in CSS use this:
body{
background-image: url('...');
background-size: 100vw 100vh;
}
Assuming your image layout to be always same.
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.
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 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%;
I've got two big css image hovers... and I want the images to be max-width:100% (for phones). I can make the divs max-width 100% but then the image inside them just logically gets cut off by the div edge. How can I make sure that the image (in this case a background-image) in the div also does the 100% max-width?
Demo: http://www.buzz-creative.nl/_test/index.html
Thanks in advance!
http://jsfiddle.net/ZuX4p/
This uses background-size: 100% to make the background image fill the div, the only problem with this is you have to specify height and width, as there is no content in the div so it wants to be 0px by 0px
try, background-size:auto;
link http://www.css3.info/preview/background-size/