I have this div:
<div id="background">
<img src="imagenes/index.jpg" height="auto" width="100%"/>
</div>
with this CSS:
#background {
position: fixed;
width: 100%;
height: 100%;
top: 0%;
left: 0%;
right: 0%;
z-index: -1; }
I want to know if there is a way to change the image height/width depending in whether the device/browser is bigger in the height/width so the image can cover the full screen.
I know changing the height="100%" width="auto" would make a good option if the device/browser is taller, but if it is wither it is not.
Any good idea?
Normally, when you target mobile device, you should use media queries. However in your case, it's just a full screen background so you can use background-size property here:
#background {
background: url(imagenes/index.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Note: This property is only supported in modern browser, for old IE versions(<8), you can try to use this IE filter:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='imagenes/index.jpg',
sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='imagenes/index.jpg',
sizingMethod='scale')";
If you can set a specific value, you may try #media feature.
#background
{
height:100%;
width: 100%;
}
#media(max-width:1000px){
#background{
height:1000px;
width: 800px;
}
}
Use this to make images responsive:
img {
width: 100%;
max-width: 100%;
height: auto;
}
#media all and (min-width: 768px) and (max-width: 1024px) {
.pr {
display: none;
}
//write here rest of code that will vanish when the screen is smaller then 1024px
}
Hope this helps! I used it for some projects of mine, worked like charm to vanish some stuff :)
Related
The website has a section, which has a background image. In the desktop website to make it look good, background image was made fixed so that it can have parallax effect. But in the mobile website, parallax does not make sense. So I wanted to remove the fixed in the mobile view. Here is the code I have tried.
<section class="girl-cover-photo">
</section>
.girl-cover-photo {
height: 730px;
background: url("../img/girl-cover.jpg") fixed;
background-repeat: no-repeat;
background-size: cover;
}
#media screen and (max-width: 768px) {
.girl-cover-photo .girl-cover-photo {
background: url("../img/girl-cover.jpg") relative;
}
}
But somehow the parallax shows up in the mobile view. Any pointers on what to do to fix this?
instead background: url('../img/girl-cover.jpg') relative;
use background: url('../img/girl-cover.jpg') scroll;
https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment
.girl-cover-photo{
height: 730px;
background: url('http://media02.hongkiat.com/baby_photography/baby_photography.jpg') fixed;
background-repeat: no-repeat;
background-size: cover;
}
#media screen and (max-width: 768px){
.girl-cover-photo{
background: url('http://media02.hongkiat.com/baby_photography/baby_photography.jpg') relative;
}
}
<div class="girl-cover-photo"></div>
Try this
Hi guys I'm using stellar.js and it is working quiet well for desktop devices. But on mobile devices the background-image will be displayed only a part of it. It is not showing the whole image but the left corner of the image. The problem must be the css code. But I don't see it. Thanks for the help guys!
My css looks like:
.intro-section {
padding: 150px 0px;
text-align: center;
background-attachment: fixed;
width:100%;
height:100%;
position: relative;
background-position: center center;
background-size: cover;
background-image: url(../images/frederick_meseck_wood_logo.png);
background-repeat: no-repeat;
}
#media(min-width:768px) {
.intro-section {
min-height: 100%;
}
}
Try this in your media query:
#media(min-width:768px) {
.intro-section {
background-attachment: inherit !important;
background-size: 100% 100%;
background-repeat: no-repeat;
}
}
The first background-size parameter is the width, you can increase this value when going to smaller devices (I recommend this)
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 have a large image to be use as a background-image of a page. What I want is that the height of the image will be stretched to fill the height of the page. It should be centered also.
background: black url("/image/background.jpg") no-repeat fixed center;
background-size: cover will do the trick in modern browsers - see mozilla's documentation for more details.
For older browsers (particularly older versions of IE), I've had a lot of success with jQuery plugins like this one to emulate the behaviour.
here is a good writeup
http://css-tricks.com/perfect-full-page-background-image/
the gist of it being
body {
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;
}
add this to the css
{
background: black url("/image/background.jpg") no-repeat fixed center;
height: 100%;
width:100%
}
I think using a div would be the easiest way to get the effect you are looking for.
<div id="background">
<img src="/image/background.jpg" class="stretch" alt="" />
</div>
<style>
#background {
background-color:#000000;
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: -1;
}
.stretch {
width:100%;
height:100%;
}
</style>
More specifically, is it possible to scale a tiled background image using CSS3's transform:scale(x,y)?
While you can't use transform:scale(), if you know the final size of the background image that you need, you can you can use background-size to get the same effect.
.selector {
background-image: url(http://path/to/image.png);
background-size: 200px 100px;
}
However, if you always want to, say, "double" the width of the image that you use as a background, then that doesn't seem to be possible at this time.
EDIT: Note that while the background-size style supports % based parameters, it's not as a percentage of the image size, but the size of the window.
You can use :
background-size: 200px;
background-size: 200px 100px;
background-size: 200px 100px, 400px 200px;
background-size: auto 200px;
background-size: 50% 25%;
background-size: contain;
background-size: cover;
(or)
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% */
}
}
(or)
#bg {
position:fixed;
top:0;
left:0;
/* Preserve aspet ratio */
min-width:100%;
min-height:100%;
}
I'm not good in CSS. But just the idea: create background div with tiled background (using z-index) and scale it. It should work
Yes you can scale it but try using percentage.
background-size: 100%;
But you need to consider the different resolutions of a screen. 4:3 4:9 etc.
I would recommend you to use this jQuery script. jQuery Strech Background