I am trying to integrate a hover effect to an img in css but the problem occurs when I hover it, the hover area is misplaced and the the hover effect occur even when the mouse is not over the img.
<body>
<div id='backgroundContainer'>
<div id='background31'></div>
</div>
</body>
CSS:
html, body {
max-height:100%;
width: 300%;
background: url('background.png');
top: 0;
left: 0;
background-size: cover;
background-repeat:no-repeat;
}
#backgroundContainer {
top:0;
left:0;
margin:0;
padding:0;
height:100%;
width:100%;
}
#background31 {
top:45%;
position: absolute;
margin:0;
padding:0;
background: url('alure.png');
background-repeat:no-repeat;
height:55%;
width:70%;
left:230%;
background-size: 5%;
}
#background31:hover{
background-size: 7%;
}
I was thinking about using background-position:x% y% or margin-left to simplify the code but it did not work what I tried.
You are applying the hover effect on an div which is set to a large area (the area in red in my fiddle below). This is why the hover is activated even when the mouse is not over the image.
If you add an image to the nested div, and apply the hover effect to this image it should work.
<div id='backgroundContainer'>
<div id='background31'>
<img src='http://www.sjiep.nl/images/sjiep.gif' id='testImage'>
</div>
</div>
and the css
#testImage{
width: 100px
}
#testImage:hover{
width: 150px;
}
See also: http://jsfiddle.net/2CbTX/1/
Update
Added a link to the image, see: http://jsfiddle.net/2CbTX/2/
because you have put the hover for the div the whole div , not just the image and this div background31 occupies the lower right corner square of your window .
see here : http://jsfiddle.net/Pda5e/
your image size becomes very small as compared to the div in which it is in. Since you have made it 5% of the div.
Resize the div to make it smaller and increase the background size to fill the div
so if you have to make the hover only affect the image, you must give the hover to image only.
like here : http://jsfiddle.net/Pda5e/1/
Try replacing this code
#background31{
background: url(maxresdefault.jpg);
background-repeat:no-repeat;
height:50px;
width:100px;
background-color:#066;
background-size: 5%;
}
#background31:hover{
background-size: 100%;
}
The hover effect occurs not over the image because you only change background-size, but not the size of #background31 element, it always remains width:70%.
So you should use background-size: 100% and change the width of the background31 element.
#background31 {
background-size: 100%;
width: 5%
}
#background31:hover{
width: 2%;
}
But background-size is not supported in IE8. If you want IE8 suuport than use <img> element instead of a div.
Related
I want to create a header with a fixed background. So I defined the following properties:
header {
margin: 0;
padding: 0;
width: 100%;
height: 300px;
display: block;
background-image: url('...');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
Now I have the following problem. Currently, the background is centered according to the Screen Width and Height. Since the header is at the top, the actual background of the header is just the top of the image. In addition, the header image section changes every time I change the screen height, which is not my goal.
I want the image to be centered within the header (center of the image is at the center of the header, but only if I have not scrolled down). In addition, the header image section should only change if I change the header width, height or screen width but not if the screen height is changed.
You can rely on vh unit combined with some calc(). The center is initally 50vh and you want it to be 150px from the top so we need a translation of 50vh - 150px. You should also get rid of cover if you want the image to not change when the screen height change but it may not render like you want.
I replaced 300px with 100px for the demo.
.header {
height:100px;
border:1px solid;
background:
url(https://picsum.photos/id/1014/1200/800) 50% calc(50% - (50vh - 50px)) fixed;
}
.not-fixed {
background-attachment:initial;
background-position:center;
margin-top:20px;
}
body {
min-height:200vh;
margin:0;
}
<div class="header">
</div>
<div class="header not-fixed">
</div>
With the use of cover
.header {
height:100px;
border:1px solid;
background:
url(https://picsum.photos/id/1014/1200/800) 50% calc(50% - (50vh - 50px))/cover fixed;
}
.not-fixed {
background-attachment:initial;
background-position:center;
margin-top:20px;
}
body {
min-height:200vh;
margin:0;
}
<div class="header">
</div>
<div class="header not-fixed">
</div>
You can clearly see how the first image is centred exactly like the second one without fixed
To get more details about the caluclation check this: Using percentage values with background-position on a linear gradient (the section Combining pixel and percentage values)
Try to wrap the img (outside the header div) and header div and play with position relative/absolute to superimpose header on top of the image.
Having done that, you can use z-index to push image backwards
So i'm trying to use an img tag to make a background img in html/css but my img tag will not allow things to overlap it and when I try to use a div class element it does not stretch to edge of page even with width at 100%. here is my css and html.
.backgroundImage {
background: url(/images/mainBackground.jpeg) top no-repeat;
width: 100%;
height: auto;
position: relative;
z-index: 0;
margin: 0 auto;
}
.img{
z-index:0;
}
.img-responsive{
height:auto;
width:100%
}
These are the two ways I've tried:
<img src="../images/mainBackground.jpeg" class="shadow-offset img-responsive"/>
<div class="backgroundImage">
The div ending after everything but my footer
I have containers but neither of these are inside any containers either because they start at the top of the page before I use containers at all.
wrap all of your html in a <html> tag, then use the following css:
html {
background-image: url("image/url.png");
}
I'm going to assume all you're trying to do is add a background image to your div - your explanation is a little unclear. The following is all you'll need:
// html
<div class="backgroundImage">...</div>
// css
.backgroundImage {
background-image: url('/images/mainBackground.jpeg');
background-repeat: no-repeat;
background-size: cover;
}
div elements are display:block by default, which means it should be 100% width. Unless there's something in your markup you're not showing us, there's no need to add width: 100%. Also, the div will also automatically change height based on its content. In this case, using background-size:cover will allow the background image to resize and fill the div regardless of size.
Unless... you're floating things inside the div. Then you're going to need a clear, like this:
// html
<div class="backgroundImage clear">...</div>
// css
.clear::after {
content: '';
display: table;
clear: both;
}
I wanted my background image to stay at the same position. So I made use of
background-attachment:fixed;
When I discovered that iOS does apparently not support this property, I decided to put a fixed background div into the DOM. This actually works pretty well:
#background {
top:0;
left:0;
width:100%;
height:100%;
position:fixed;
background-position:50% 0%;
background-repeat:no-repeat;
background-attachment:fixed;
background-image:url("images/mark-bg.png");
}
At the first look, this works great in iOS too. But then I recognized, that Safari scrolls the DIV up, to where it would have got scrolled, if it wouldn't be fixed.
Now I ask myself »What the hell...?!« I mean... Why does iOS scroll an element that is explicitly told to not do so?
Is there any intelligent solution?
Here is a complete Demo
EDIT
I just found out, that not the element moves itself, but the background image moves...
I found a quite suboptimal solution, but at least it works. I don't use background-image in CSS anymore but put a img tag inside the background div and position it absolute:
#background img {
top:0;
left:0;
right:0;
bottom:0;
position:absolute;
}
Here is the fiddle
Unfortunately, the paragraph "this is text" is not vidible anymore. Lucky, thats it's just for background...
Also the image is not centered anymore, nor resized correctly :[
Edit
I added the following CSS to fix the positioning:
#background img {
margin-left:auto;
margin-right:auto;
}
Julian's answer was very helpful to me.
It solved part of the problem, which was to prevent scrolling of the background image by replacing it with a static image in a fixed position div, avoiding Safari's faulty interpretation of "background-attachment: fixed".
But it left me with an image that I couldn't center within the viewport such that the center of the image was always on the center of the viewport.
This is normally background-position: 50% 50% and background-size: cover, but not when we don't have a background-image at all.
So I replaced Julian's inner <img> with a <div> having similar settings.
Then I added the background-image and properties to that div, EXCEPT FOR background-attachment which I left out.
This resulted in a div which took up the entire viewport and was fixed to the viewport, and which had a child div filling it completely, and that child div had a static background image set at position 50%/50% and size cover.
Works great!
My inner div styles are as follows:
#div_background > div
{
top: 0px;
left: 0px;
width: auto;
height: auto;
right: 0px;
bottom: 0px;
position: absolute;
margin-left: auto;
margin-right: auto;
display: inline-block;
background-image: url(/images/background.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
With the parent div styles as follows:
#div_background
{
display: inline-block;
position: fixed;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
right: 0%;
bottom: 0%;
z-index: -1;
background-color: #A0B4C8;
}
And the HTML is simply:
<div id="div_background"><div></div></div>
I consider this a hacky solution, but a necessary one due to Safari's bug.
A simple way of thinking of it is that rather than using background-attachment of fixed, we're creating our own fixed background and manually attaching a new div with the background image to that.
Thanks, Julian!
I have a main wrapper div with the following css attributes:
div#mainWrapper {
margin: auto;
width:70em;
height:100%;
background: url(../images/header.jpg) no-repeat center center fixed;
background-size: cover;
}
I want to make the whole div and it's brackground to be visible, even if the div itself is empty.
I dont want to use position:fixed or position:absolute if possible.
Unless you set a height in the parent container, the height of your #mainWrapper will compute to 0 and you won't see the background image or color.
Set the height to 100px to double check that your image is loading properly.
Make sure that your body and html tags have height of 100% if you want to use relative heights.
It may be that your HTML or body elements aren't big enough. height:100% will only fill the parent containers height so try adding this to your CSS:
html, body
{
height:100%;
}
http://jsfiddle.net/unt9M/ demonstrates this using a single coloured background. Remove the CSS that I've described above and you'll see that the div is only then single line because the body and HTML are not big enough.
add:
body,html{
height:100%;
}
See http://jsfiddle.net/derekstory/xU2g9/
Note that I added a background color to show the example.
Does you parent have any styles for width and height?
If the parent is body then try like this :
CSS
html,body{
width:100%;
height:100%;
}
div#mainWrapper {
margin: auto;
width:70em;
height:100%;
background: url('http://images04.olx.com/ui/1/50/31/12504931_1.jpg') no-repeat center center fixed;
background-size: cover;
}
JSFiddle
I simply added a float:
div#mainWrapper {
margin: auto;
width:70em;
height:100%;
background: url(../images/header.jpg) no-repeat center center fixed;
background-size: cover;
float: left/right;
}
I'm not trying to actually crop the image file. The image has a thick border all around and I just want to somehow hide it. The markup html is this.
<div class="imgDiv">
<img height="200" width="200" src="http://site.com/image.jpg">
</div>
Is there a way to center or resize this image so that the border is gone?
Sure. Say you want only the center 100x100. You could use this CSS:
.imgDiv {
width: 100px;
height: 100px;
overflow: hidden;
}
.imgDiv > img {
position: relative;
left: -50px;
top: -50px;
}
Here I've gotten the center 64x64 of your 128x128 avatar using this technique: http://jsfiddle.net/5kHbQ/
You could do it with css, inline:
<div class="imgDiv" style="width:200px;height:200px;background:url(http://site.com/image.jpg) no-repeat -20px -20px;"></div>
or in css:
.imgDiv{
width:200px;
height:200px;
background:url(http://site.com/image.jpg) no-repeat -20px -20px;
}
Either way, you would remove the <img> node in the html.
Play with the width, height, and the last two values of background.
While not the primary purpose for using them, you can use CSS Sprites to remove the border.
Essentially, you would use div elements defined with the height and width that you desire for the image.
Then, you would set the background-image property to be the url of the image (be careful here, the url of the image is relative to the location of the CSS, so be mindful if you use an external CSS file instead of an inline style attribute).
Finally, you would set the background-position property to offset the image so that it lines up with the div element you defined as the "frame".
Lets say you had 10 pixels of yucky border on the image. The following CSS would hide it from view:
.imgDiv { width:180px; height:180px; overflow:hidden; }
.imgDiv img { display:block; margin:-10px 0 0 -10px; }
An alternate method would be to use position:
.imgDiv { width:180px; height:180px; overflow:hidden; }
.imgDiv img { position:relative; top:-10px; left:-10px; }