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
Related
The background image of the header of my site is stretching and warping in weird ways on certain mobile phones.
Here's the link to the site - https://jaels-creations-stage.callgage.co/
Here's the code for the background image, it s a child of the header container:
.header .background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-position: center 92%;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
z-index: -1;
/* On Load Animation */
opacity: 0;
}
I've been trying to figure this out for a long while now, I can't replicate it on my macbook, and with devtools remote devices I can't figure out a proper way to fix it. Any help would be greatly appreciated.
Try height:auto; that will cause css to retain the image's natural aspect ratio
I think is because you need to set the eight to auto
bg {
position: absolute;
top: 0;
left: 0;
min-height: 100%;
/* set your own */
min-width: 1440px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Use this if you have your images set to fixed. It will promote the layer */
transform: translate3d(0, 0, 0);
}
This has been annoying me now for a few hours as I keep fiddling around with the code and don't seem to be getting anywhere at all.
I really like the way that this website has a fluid image background:
Here
I have downloaded the code and am not currently trying to make a slideshow, but instead a single image background that when you play around with the size of your browser expands and contracts the same way as in the website.
If i take the code that they use in their CSS and apply it to my own image I keep getting this instead.
https://jsfiddle.net/9cpz4gua/
body{
background-image:url(https://blogs-images.forbes.com/ericsavitz/files/2011/03/smiley-face.jpg?width=960);
background-repeat:no-repeat;
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
}
Could someone please advise me what to do in order to get my background image to expand and contract about the center as the website does?
Here is my answer, it may not be the easiest or the most complete but it give a very beautiful looking result that answers your question
Basically, you create a new div directly under your body
and style it this way:
.bgimg {
z-index: 1;
background: url(http://dondev.ovh/light_abstract.jpg);
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
See it in action
This is a css only answer, you can use JavaScript alongside for better result.
Regards
If all you want is to have your image always fill the page, just remove some things from your own style to achieve the "cover" effect.
Try this:
body{
background-image:url(https://blogs-images.forbes.com/ericsavitz/files/2011/03/smiley-face.jpg?width=960);
background-repeat:no-repeat;
color: transparent;
background-size: cover;
opacity: 0;
z-index: 0;
}
https://jsfiddle.net/9cpz4gua/2/
I need some help with CSS. As you can see here https://jsfiddle.net/88eb92ed/ the scrollbars are enabled. I want to hide them. I've never used CSS before, and I used a template, that's why I don't know how to change it. I would like to disable the scrollbars. I don't really know what's easier: change background image size or disable scrollbars. Some code:
.body {
overflow: hidden;
position: absolute;
top: -20px;
left: -20px;
right: -40px;
bottom: -40px;
width: auto;
height: auto;
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
background-image: url({{ url_for('static',filename='images/parisbackground.jpg') }});
-webkit-filter: blur(5px);
z-index: 0;
}
I tried using overflow: hidden (from this SO question) and check several webpages trying to fix this. It seems that the image is bigger than the window, so I would like to keep the image center, but adjustable to the window size, with no scrollbars.
Thanks!
If you just want to disable the scroll bars:
body {
overflow: hidden;
}
Notice That's on the <body> tag and not the .body class.
If you want to force the elements to fit in their parent containers, you will need to refactor how they're positioning in relation to one another.
You've got some interesting things going on in regard to your markup. I'm not sure what the purpose of .grad is. Also, would it not be simpler to apply the styles to <body> rather than trying to absolutely position <div class="body"> behind a bunch of stuff?
If you're sticking with .body, you don't need to define all four dimensions for positioning. You only need to orient one position for either X or Y.
So it looks more like:
position: absolute;
top: 0;
left: 0;
Try below :
http://jsfiddle.net/pratyush141/mkzkqdv0/
.body{
width:100%;
overflow: hidden;
position: absolute;
top: -20px;
left: -20px;
right: -40px;
bottom: -40px;
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
background-image: url(http://www.meezan.tv/themes/default/member_images/example_background.png);
-webkit-filter: blur(5px);
z-index: 0;
}
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 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/