I've a problem with an HTML page. This page has 2 elements:
1 div with position: absolute in the left part of the page that is a logo of the page
1 table always at the center of the page.
If I resize the page, the table is always at the center of the page, but I'd want that the div crops the background in this mode:
How can I do this trick?
The css of the left div is :
position:absolute;
z-index:2;
width:40%;
height : 100%;
background-image : url('img.png');
background-size : contain;
background-repeat : no-repeat;
background-position:fixed;
resize: none;
overflow: none;
Try setting the background-position:fixed for the logo.
You can do the image cropping by giving a negative value as the left div's left coordinate, using calc(), like:
left:calc(35% - 400px);
Where 35% is the horizontal point where you want to crop the image, and 400px is the left div's width.
#cendiv{position:absolute;
width:30%;
height: 20%;
background-color: yellow ;
left:35%;
top:40%;
}
#leftdiv {position: absolute ;
width:400px;
left:calc(35% - 400px);
top:0 px;
}
#leftdiv img {
width:100%;
}
<div id="cendiv"></div>
<div id="leftdiv">
<img src="http://www.freeimages.com/assets/182924/1829230933/leaf-collection-1-895724-m.jpg">
</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
I want to set the image as a background in a div so that the source can be changed for each device for its image resolution. the problem is I don't want to set the height of the div, but only it's width which is 100% so that it can be fit with the device window's width. Therefore, I want the height is automatically generated based on the width of the div.
I have set the height of auto, but the div is not appear unless I set the height with value.
#imagetree {
position:absolute;
z-index:12;
width:100%;
height:auto;
bottom:0;
overflow: hidden;
background: url(images/trees.png);
background-repeat: no-repeat;
}
if you knew in advance the ratio between width and height of your image you could cheat using a proportional padding-bottom
E.g If your image were 300x180 you may use this css
#imagetree {
position:absolute;
z-index:1;
bottom:0;
overflow: hidden;
background: url(http://dummyimage.com/300x180/000000/fff.jpg);
background-repeat: no-repeat;
width: 100%; /* use 100% of width */
padding-bottom: 60%; /* 180px is 60% of 300px */
background-size: cover; /* cover the div entirely with the background */
}
Example: http://codepen.io/anon/pen/ruBFt
When you give position: absolute, the height and width are not set initially. You need to manually set them using CSS. In your case, since you have put background as an image, being positioned absolutely, why do you wanna set it as background-image?
You can put the image in the <img /> tag itself and then render with normal widths and heights that are proportional to the image too! Change your code by adding an image inside the absolutely positioned container.
<div id="imagetree">
<img src="images/trees.png" />
</div>
And in the CSS, you may wanna give this:
#imagetree img {max-width: 100%;}
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.
.step-1-4 {
background:url('../images/gadget-4-sprite.png')
no-repeat; width:950px;
height:70px;
margin-left: 15px;
}
Above is the CSS for a div I have which holds a background-image. I have set the height and width of the div the same as the dimensions of the image. The problem i'm having is when the window is re-sized for example less than the width of the image, it gets cut off.
Is there a solution whereby I can style the CSS in such a way that the div re-sizes along with the image inside it. I have tried making the width of the div 100%, which re-sizes the div correctly, however the image still does not re-size. Maybe if this is not a good solution, then how can this be achieved using an <img> tag.
use background-size:cover; or background-size:100% 100%;
so your css will be ::
.step-1-4 {
background:url('../images/gadget-4-sprite.png') no-repeat;
background-size:100% 100%; /*..or cover ...*/
width:950px;
height:70px;
margin-left: 15px;
}
I have two images which need to be over each other. The images have to also be responsive and therefore have a percentage width and height.
<div class="container">
<img src="res/bigger.png/>
<img src="res/smaller.png class="icon"/>
</div>
.container {
width:100%;
height:100%;
background-color:blue;
postion:relative;
}
.container img {
max-width:100%;
max-heihgt: 100%;
height: auto;
width: auto;
}
.icon {
position: relative;
top: -70%;
left: 20%;
z-index: 50;
width: 10% !important;
height: auto !important;
}
As the two images do not have the same proportions when re-sized the smaller image which is on top of the bigger image will lose its position relative to the bigger image. How could I maintain the position of the smaller image relative to the bigger image when I re-size the page?
An example of this problem could be found here http://jsfiddle.net/5YQFV/
How about, instead of using two images you would replace the largest image with a container like this
<div class="the-gang">
<img src="res/smaller.png" />
</div>
And then set the position of the container to position:relative but the position of the smaller image to position:absolute like this
.the-gang{
position:relative;
width:100px;
height:75px;
}
.the-gang img{
position:absolute;
top:10px;
left:10px;
}
This way the smallest image will always stay where you place it, as the absolute position will be relative to it's container.
The possible disadvantage is that you have to set minimal height and width of the parent container, but the advantage is that it will be done purely in CSS and no javascript will have to be used.