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/
Related
I created this class with CSS:
.leaf {
background: url();
position: fixed;
background-size: 300px;
z-index: 0;
height: 206px;
width: 300px;
top: -5%;
left: -7%;
}
Which shows a leaf in the background. What I want to do is to not make this image move when the page is zoomed, or even when the display's width is less then 1024px. It has to stick in that position!
Thank you very much
I have this in my CSS:
.cover .cover-image {
z-index: -1;
position: absolute;
top: 0px;
width: 100%;
height: 100%;
background-size:100%;
background-size: cover;
background-position: center;
}
I also have this in my HTML:
<div class="cover-image" style="background-image : url('./bkg.jpg');">
bkg.jpg is a 1939x1131 image - bigger than any of my monitors. On my smallest (1280x1024) monitor, it displays fine:
On my medium (1440x900) and large (1920x1080) monitor - both of which are smaller than the image - it shows a bit of white between the image and the scrollbar:
Why does this show, and how do I fix it?
Check your image source
https://chipperyman.com/dota/bkg.jpg
You have a white bar on your image.
double on background-size your code, please fix background-size:100%, otherwise you will get issue.. And i mean you not need using background-size because your image already bigger than your screen..
you need normalize html, body
html, body {
padding: 0;
margin: 0;
}
there.
Basically you are having an absolute positioning bug here. Just add 'left: 0px;' to your .cover .cover-image selector as per following:
.cover .cover-image {
z-index: -1;
position: absolute;
left: 0;
top: 0px;
width: 100%;
height: 100%;
background-size:100%; /* old browser fallback, but I'd delete it */
background-size: cover; /* duplicate of background-size */
background-position: center;
}
Here is also a jsfiddle example of fixing it: http://jsfiddle.net/webyourway/868L6hhg/
I'm trying to make an image that changes into another image when hovered over that also scales based on the size of the browser.
The css code I have so far is this:
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
#a_Cscaleskb{
width:0px;
height:0px;
background:url('../images/a_Cscaleskb_up.gif');
padding:47px 114px;
}
#a_Cscaleskb:hover {
background: url('../images/a_Cscaleskb_over.gif');
}
with the html:
<img id="a_Cscaleskb" src="../../images/a_Cscaleskb_up.gif" alt="" />
This works great for changing the image on hover but when I shrink down the browser it doesn't change.
Another piece of code I've tried is this:
#a_Cscaleskb{
background:url('../images/a_Cscaleskb_up.gif');
top: 0;
left: 0;
right: 0;
bottom: 0;
background-repeat: no-repeat;
background-size: contain;
}
#a_Cscaleskb:hover {
background: url('../images/a_Cscaleskb_over.gif');
top: 0;
left: 0;
right: 0;
bottom: 0;
background-repeat: no-repeat;
background-size: contain;
}
This css scales properly upon hovering, but you can see both images laying over each other. I know it's also possible to use javascript but I'm trying to avoid using it. Any suggestions are greatly appreciated.
If you want to scale your images according to browser size then use this sneaky bit of code:
img{max-width:100%;width:auto;height:auto}
that's what i've used in my gallery page in www.busyfeet.rachelgallen.com - give it a look and see it in action
I want the header to have an image for background. And I want that background image to have a 100% width and the rest of the image for the height (for whatever maintains aspect ratio for height).. and the header elements on top.
I tried to apply..
header {
Background: url(background.jpg) no-repeat;
background-size: 100% auto;
}
but this makes the background stops right where the header elements stop (the navigation menu).. I want the background image to go all the way down till the image itself is finished..
I'm sorry if this doesn't make any sense.
If I've understood this correctly the height of your header elements is less than the height of your picture.
header {
Background: url(background.jpg) no-repeat;
background-size: 100% auto;
height: <height of the image in pixels>px
}
This will make both the same height so that the image will not be cut off
You can use the z-index property of the css.
CSS:
header
{
position: absolute;
top: 0px;
right: 0px;
height: auto;
}
span
{
z-index: 2;
}
img
{
position: absolute;
top: 0px;
left: 0px;
z-index: -1;
}
HTML:
<header><span>Your text here</span><img src='Your image.JPG'/></header>
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