i want to change the background position and in front of that a img at the same time.
I have a bad solution used a second div and centered it with padding. But when i mouse over the padding of the first div the picture dont change the picture.
#contentright {
height: 58px;
width: 256px;
overflow:hidden;}
I've made a fiddle exemplifying my scenario. JSFIDDLE
Any solution how i can fix that? Greetz
check in fiddle
.logo {
width: 100%;
height: 100%;
background:url(http://s1.directupload.net/images/140101/hy2cqqkj.png) 0 0 no-repeat;
background-position: center center;
}
in logo class
Related
I am trying to place an image on my site. But the image is crossing the div border and going out and thus making the website horizontally scrollable.
I have use the float tag in css.
here is my css code
.image-2{
width: 40%;
display: block;
float: right;
padding-right: 50px;
}
my did style sheet
.about{
display: block;
width: 100%;
height: 750px;
background-image: linear-gradient(to top right, #130178, #4F35DF, #5FD0F5);
}
How can I keep the image fixed inside the div and stop it from going out and increasing the width of the site?
Use max-height:100%; max-width:100%; object-fit: contain; for the image inside the div.
add width: 100%;to the image. then image inside parent element
So i have this image right here
"http://i.imgur.com/eh71foN.png"
My problem is that whenever i resize the window the Mass Effect image doesnt resize with it.
It becomes like this
"http://i.imgur.com/jaDV7jG.png"
I've been trying to figure this out for a while. Can anyone point me in the right direction?
#MassEffectSign {
background: url(masseffect12.png) center top no-repeat;
top: 25px; left: 750px; z-index: 2;
padding: 250px;
position: absolute;
}
My blue background
#bodyBorder {
background: url(navyblue.jpg) center top repeat-y;
padding: 1000px;
opacity: 0.7;
background-attachment: fixed; }
Use img tag instead background image in CSS.
img {width: 100%}
Use percents for the relevent values.
top: 25px; left: 45%;
This makes the amount of space between the left edge and the image relative to the window size. Play around with the value a little to center it and you should be good.
Your positioning is absolute, so it will move independently of the scale. Put that inside a relatively positioned div and then it will work.
For instance,
<div style="position:relative;">
<div id="MassEffectSign"> </div>
</div>
Hope this helps.
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.
I have a div box that in the HTML code is below all the other content and not nested into anything else. In the CSS I placed the div on the top right of the site, and when I change the window size so that it doesn't fit, it jumps down on the site. I am not allowed to change the HTML code (it's a school assignment).
Is there any way I can make this jumping div box stay in place relative to the main content?
In the div box I have placed a background picture because this is the only way to add a stand-alone picture without changing the HTML. The teachers added these extra div-boxes in the code just for this.
The div's CSS (if it helps):
#extraDiv1 {
background-image: url('images/koala.png');
background-repeat: no-repeat;
background-size: 250px;
width: 250px;
height: 370px;
float: left;
margin-left: 20px;
margin-top: -610px;
position: relative;
z-index: -1;
}
You can use the top and left attributes to position your box properly. Since you're using relative positioning, this will position it relative to its normal position. Therefore, if you want to line it up with where you said you want it, you would end up with something like this:
#extraDiv1 {
background-image: url('images/koala.png');
background-repeat: no-repeat;
background-size: 250px;
width: 250px;
height: 370px;
position: relative;
z-index: -1;
border: 3px solid red;
top: -610px;
left: 660px;
}
Hope this helps!
Working Demo: http://jsbin.com/opokev/54
I'm working on having this image as the background image and also have a header as well, however, as the demo shows my header is cutting onto the image.
How can I correct this so that first the header draws and then the background body image draws. I still want to maintain the quality of the image as is without scaling it.
Here you go http://jsbin.com/opokev/64/
just changed top: 0 to top: 85px and it works.
Try using background-position.
background-position: 0px 85px;
Could do the trick :)
Or you could try just using this:
#background img {
width: 100%;
height: 100%;
position: absolute;
top: 85px;
left: 0;
z-index: -1;
}
I can't see any difference in these to backgrounds (thinking about scaling):
http://jsbin.com/opokev/54
http://jsbin.com/ijoyiy/2
Then again, I'm 2min away from sleeping and I haven't got my glasses on ;)
Remove the img tag and use background-image for the div#background. Then, set background-position to center 85px.
Combined CSS:
div#background
{
background:url('http://i52.tinypic.com/33xd1yu.jpg') no-repeat center 85px;
width:100%;
height:100%;
}
This will shift the background image down 85px.