Here is a demo. I want to get full fit the background image withouth streching. Because when i resize window image will be distorted. If i change the css with
position: absolute;
width: 100%;
height: 100%;
background: url("http://farm9.staticflickr.com/8100/8601158004_173413335e_k.jpg");
background-repeat:no-repeat;
image doesn't strech anymore but then image will be enormously big. How can set the background image properly?
I will appreciate for any help.
You can use the background-size-property cover for this:
#homee {
position: absolute;
width: 100%;
height: 100%;
background: url("http://farm9.staticflickr.com/8100/8601158004_173413335e_k.jpg");
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
http://jsfiddle.net/G2Rhq/4/
Update
If you've to support oldIE try my super-simple jquery plugin for this:
https://github.com/yckart/jquery.fitpic.js
Related
How can I have an image always covering all the screen regardless of monitor sizes? I have an image which has a height of 1000px and a width of 1000px. I don't want the image to be repeated but I don't want the scrolling bar to appear as well. If I use % the image is repeated, because it's inside a div. Thank you
I want the bottom of the image to be always at the bottom of the browser page and the div/image to be always the same size, even if I zoom with the browser
div {
width: 1000px;
left:0%;
right:0%;
top: 0%;
height: 800px;
text-align:center;
position: absolute;
background-image: url("image.png");
background-position: 50% 50%;
margin:auto; }
Try this out
div {
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;}
If you still want to know more, do check out this link
https://www.w3schools.com/howto/howto_css_full_page.asp
well if you want set up a full image background that is also responsive, you can do the following:
div {
width: 100%; height: 100%; top: 0; left: 0;
background: url(images/bg.jpg) no-repeat center top; position: fixed; z-index: -1;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
If you want to add this image as background image you can add the below css
div {
width: 100%;
height: 100%;
background: url(images/bg.jpg) no-repeat center top;
position: fixed;
z-index: 0;
}
Or if you want image to be show you can do the below things
<img src="images/bg.jpg" style="width: 100%;height :100%">
if (screen.width>=500){document.write(" body{zoom:78%;}");}
Here's the solution for my code, I needed to change the zoom.
I am 100% at a loss as to why I cannot get a background-image to display. I have tried multiple different images to rule that out. I have also changed src to url, changed the background-size from cover to auto 100%. Nothing I do will get the image to display.
Does anyone see why my background image will not display?
#home-img {
background-image: url("http://cosmotekcollege.com/wp-content/uploads/2015/08/ban4.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-position: 50% 50%;
width: 100%;
height: auto;
position: relative;
}
<div id="home-img">
</div>
Here is jsfiddle
If you use backgound-image and you don't have content inside div, you always should set height. Here is example https://jsfiddle.net/5pphkLmt/5/
<div id="home-img">
</div>
#home-img {
background-image: url("http://cosmotekcollege.com/wp-content/uploads/2015/08/ban4.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-position: 50% 50%;
width: 100%;
height: 540px;
position: relative;
}
Using Chrome Inspect, I changed the #home-img height from "auto" to 537px and then the image appeared. So updating the height is one option to fix this issue.
Another option is covered in this SO Q&A entry.
How to get div height to auto-adjust to background size?
you should add height to your code or put something in this DIV, just test height: 100px; and enjoy it :)
I have this in my css file:
.apiscar1 {
object-fit: none;
object-position: -354px 0;
width: 85px;
height: 155px;
}
.apiscar2 {
object-fit: none;
object-position: -189px 0;
width: 155px;
height: 155px;
}
And I call the sprite.png img src on my wordpress page.
This works perfectly for a lot of images placed into the sprites.png but it doesn't work in IE. How do I make it work in IE?
Object-fit and object-position are not supported in IE/Edge.
I use a workaround where I set the image as a background on an element, background-size can be used as replacement for object-fit and background-position for object-position
Here is a jsfiddle with your example. https://jsfiddle.net/124f0hve/
.apiscar1 {
background-image: url("http://lorempixel.com/400/200/");
background-size: cover;
background-position: -354px 0;
width: 85px;
height: 155px;
}
.apiscar2 {
background-image: url("http://lorempixel.com/400/200/sports/");
background-size: cover;
background-position: -189px 0;
width: 155px;
height: 155px;
}
I used lorempixel images, you get random images on every change. If you look in the network, you will see the full image that was fetched and on the screen it shows only a portion of it.
I hope this helps.
Make some div with position: relative as a wrapper and image position set as a absolute. Then use top, right, left, bottom to set position of image. This is workaround for object-positioning for IE.
I have a header div, which I want to be fully covered with a background image. I want the image to be fully shown, so nothing is cropped. However, it seems to be stretching the image and cropping it.
css:
..header{
border-top-left-radius:5px;
border-top-right-radius: 5px;
max-width: 600px;
width:100%;
height: auto;
min-height: 200px;
background: url("img/bg-abstract.jpg") no-repeat fixed;
background-position: left top;
background-size: 100%;
position: relative;
background-attachment: fixed;
background-repeat: no-repeat;
}
What you need is
background-size:cover
background-size: cover Also try using % instead of px.
I am building a customization script where a user can upload an image and drag it around a template image to get a desired result. The problem is the template image is over 1000px tall and wide, so I put it inside a container limiting it's height/width.
How do I make it so the uploaded image is scaled exactly the same so when I create the image via PHP I can take the left: and top: CSS values and apply them to the much larger template image and uploaded image?
Current CSS:
#template {
position: relative;
padding: 0;
width: 500px;
height: 500px;
z-index: 1;
}
#uploaded {
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
I'm not quite sure if that is what you are asking for … anyway:
The CSS3 property background-size: 100% lets you specify that the background image of should fill out the container's size and stretch proportionally. Together with background-repeat: no-repeat it might be what you are looking for:
#uploaded {
height: 500px;
width: 500px;
background-image: url(...);
background-size: 100%;
background-repeat: no-repeat;
}
Demo: http://jsfiddle.net/pu76s/3/