I have a div which size may differ time to time.
At I set a background image to tat div which image size is fixed.
But I need to fit the background image to div at any size.
How could be possible thro' CSS.
Thanks in advance!!!
The only way to change a size of an image with CSS is when it's an <img> element.
I mean that you can do something like that:
img#myBG { width:200px; height:100px; }
If you need it to be a background, you should use 'z-index' and put your img under a the element that holds the content.
Something like this:
<div id="holder">
<img id="myBG" src="...." />
<div>my content here</div>
</div>
<style>
#holder { position:relative; width:200px; height:100px; }
#holder div { position:absolute; top:0; left:0; z-index:2; }
img#myBG { width:200px; height:100px; { position:absolute; top:0; left:0; z-index:1; }
</style>
It's not possible with CSS 2.x that's available in most browsers, but CSS 3 has introduced the background-size property. You can read details here: http://www.css3.info/preview/background-size/
Related
For some reason when I tried to make a background and add images to it the images just dissapear.
.Background1{
position:relative;
top:0%;
left:0%;
height:100%;
width:100%;
content:url("/assets/backgroundlayer1.jpg")
}
.Background2{
position:absolute;
top:35%;
left:25%;
height:75%;
width:50%;
}
<div class="Background1" name="Background1" id="Background">
<img class="Background2" name="Background2" id="Background" src="/asset/Background2.png">
</div>
Edit: I want background2 to fit on background1.
Use the background-image property instead of the content property. The content property is overiding the content of your div, thus removing the image.
.Background1{
position:relative;
top:0%;
left:0%;
height:100%;
width:100%;
background-image:url('/assets/backgroundlayer1.jpg')
}
You have two things wrong .. You are calling the background image with content when you should be using the background property.
CONTENT PROPORTY
BACKGROUND PROPERTY
The second, you're trying to assign a height percentage where it is not allowed (the element is relative).. You need absolute definition (px or pt for example):
.Background1{
position:relative;
top:0%;
left:0%;
height:600px;
width:100%;
background:url("/assets/backgroundlayer1.jpg") no-repeat;
i am wondering if is it possible to disable pointer event for say half of an element not entirely? for example like picture below..
maybe it would be possible to use another element to overlap that part of element that i want to be disabled but as far as i realized it is impossible through any straight way but we can cover that part of image by another div and then it'll do the trick...
for that we should put our image in a container then set its position to fixed now let's check it out
#container{
position:fixed;
width:150px;
height:150px;
left:0;
top:0;
z-index:5;
overflow:hidden;
}
#container img{
width:100%;
height:100%;
cursor:pointer;
}
#imgcover{
position:absolute;
display:inline-block;
height:250px;
width:150px;
left:50px;
top:8px;
transform:rotate(45deg)
}
and html codes
<div id="container">
<div id="imgcover"></div>
<img src="/forum_corner03.png" />
</div>
I am trying to zoom a image which is inside a div.
When page is loaded i am showing 300*300 size image inside a 400*400 size div.
So, to show the image at the center of the div i am using the following css.
#img1{
width:300px;
height:300px;
position:absolute;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
}
with the above css code i can able to show the image at the center of the div.
but when a user clicks on zoom button i am increasing the height and width of the image. If it becomes 600*600 size image, i have to show scroll bar so the user can scroll the div to show the full image.
For this i set overflow:auto to div.
But the problem is i can't see the full image when i scroll the div. This may be due to the position:absolute property of image. How can i fix this.
I created a fiddler also. There i am showing 2 divs before and after zooming image. Please check.
http://jsfiddle.net/codingsolver/L4qdL/1/
Can you try this;
HTML
<div class="outer">
<div class="inner">
<img id="img1" src="http://siliconangle.com/files/2012/04/HTML5_Wallpaper_1680x1050.png" />
</div>
</div>
<button class="zoomout" data-zoom="out">Zoom Out</button >
<button class="zoomin" data-zoom="in">Zoom In</button >
CSS
.outer{
height:400px;
width:400px;
overflow:auto;
border:1px solid black;
float:left;
margin:30px;
text-align:center;
}
.inner {
height:400px;
width:400px;
display:table-cell;
vertical-align:middle;
}
img {
width:300px;
height:300px;
}
http://jsfiddle.net/L4qdL/7/
I have a question which is asked over a thousand times, I spent whole morning reading simulair question but just cant get mine fixed so hope anyone can help me out.
this is my demo: http://jsfiddle.net/skunheal/4qx6a/1/
#one{
width:100%;
min-height:100%;
background-image:url('http://www.vloerenmantegels.nl/upload/userfiles/Ariostea_Pietre_Black_Ardesia_wi1.jpg');
background-attachment:fixed;
color:#fff;
}
#two{
width:100%;
min-height:100%;
background-color:transparent;
position:relative
}
#content{
min-height:60%;
position: absolute;
bottom:0px;
background:#ff9900;
}
I have 3 divs, all 100% height the first div (div.one) has a picture which is attached fixed The second div (div.two) has an orange textbox div in it(div.container), which is positioned absolute and bottom:0px so it sticks to the footer of div.two. div.two has a transparant background (its white in the fiddle because I cant seem to set it to transparant)
Now when you start scaling the window you see the orange box (div.content) will start expand ing upwards because the text has les space horizantal, but as soon as its the full height of div 2 is just keeps going and starts overlaping div.one, While I want it tp push itself down against div one and make his prant div.two bigger.
How can I fix this because I cant find a way to do this without using javascript.
http://jsfiddle.net/4qx6a/2/
Positioned with relative.
BTW, setting min-height:100% on your container and more than one on the inside is probably not the desired effect, unless you want each one to take up the entire height of the window.
I've made a similar one which you can use. This is working fine if i understood your question correctly.
the HTML
<div id="one"></div>
<div id="two">
<div id="content"></div>
</div>
<div id="three"></div>
the CSS
* {
margin:0;
padding:0;
}
body, html {
height:100%;
}
#one {
width:100%;
height:100%;
background:pink;
}
#two {
position:relative;
width:100%;
height:100%;
background:transparent;
}
#content {
width:100%;
background:grey;
border-top:3px solid black;
position:absolute;
bottom:0;
min-height:60%;
}
#three {
width:100%;
height:100%;
background:green;
}
working Fiddle Link
I have 2 divs and I wanted to resize images inside in those divs but they should allways fill div and constrain proportions.
Like this one:
http://www-07.ibm.com/sg/60/
If you try to resize them, they will allways fill their divs and images will allways keep their proportions.
HTML:
<div class="one">
<img src="imgs/photo1.jpg" class="photo1">
</div>
<div class="two">
<img src="imgs/photo2.jpg" class="photo2">
</div>
CSS:
.one{
float:left;
width:50%;
height:50%;
position:relative;
overflow:hidden;
}
.two{
position:relative;
overflow:hidden;
width:50%;
height:50%;
float:left;
}
How do I style those images to look like this?
http://www-07.ibm.com/sg/60/
Site is using jquery plugin for the effect, however you can get the same by css3 background-size:cover property.
What you have to do is :
Remove source image and give it through background and use background-size:cover.
<div class="one">
</div>
.one{
float:left;
width:50%;
height:50%;
position:relative;
overflow:hidden;
background: url("path to image") no-repeat center center;
background-size : cover;
}
I could be missing something here, but if I understand your question correctly, you can just add:
width: 100%;
to your img tags and they will always fill the containing div.
Try this,
.one img, .two img {
width:100%;
height:auto;
}
I think you would get the best result by not using the tag, but instead make these background images with the attribute:
background-size:cover;
background-position:center;