.overlay{
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
background:url(hex-shape.png) no-repeat center;
z-index:99999;
}
My background image is an overlay for the entire page. I would like to fill the rest of the page with white surrounding the overlay image but not within it.
I am using it to frame a picture in the middle of the screen.
The idea is the page can be a full color behind the background image and still be invisible because of the border or whatever gets put around the image.
.overlay{
position:fixed;
top:0;
left:0;
bottom:0;
right:0;
background: #{your_color} url(hex-shape.png) no-repeat center;
z-index:99999;
}
If you know the size of the picture, this is an easy way to center an image in the middle:
HTML:
<div id="container">
<img id="placekitten" src="http://placekitten.com/g/200/300">
</div>
CSS:
#placekitten {
position: absolute;
left: 50%;
top: 50%;
margin-top: -150px;
margin-left: -100px;
z-index: 9000;
}
#container {
height: 500px;
border: solid black 1px;
}
The key is to make the margin-top equal to -1 * height/2 and the margin-left equal to -1 * width/2. You do have to set these values manually for this to work, however.
FIDDLE
dont realy understand what you need but i think this will help
use stretch technique :
.overlay{
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
background:url(hex-shape.png) no-repeat center;
z-index:99999;
}
play with the top, left, right, bottom values
Related
I've got an image, which is about 600px wide, and several smaller images (a little over 100px each) that I need to position centered below the bigger image. Deal is, I need them all in a wrapper together, because I need them to scale relative to one another, rather than overlapping as the window is sized down. Right now, the smaller images shift according the the resizing, so they aren't staying in position relative to the bigger image. They also aren't positioned relatively because when I do so, the css centering no longer works.
Maybe a simpler way of putting it is this. I want these pictures all together in one div that is centered on the browser screen, so the pictures are responsive and stay in the same position/size relative to each other. The div is relative to the screen, and the pictures relative to the div. Inside the div is the big image on top, and 4 smaller images lined up underneath it.
I guess another way to put it is that I want them all the function responsively as if they were just one image, but I need them separate because I need to animate them separately.
http://codepen.io/kathryncrawford/pen/bVyeyL
<div id="wrapper">
<img id="logo" class="img-responsive copy" srcset="http://www.fillmurray.com/600/600"></img>
<div id="wrapperSig">
<img class="img-responsive signature" srcset="http://www.fillmurray.com/100/100"></img>
<img class="img-responsive signature" srcset="http://www.fillmurray.com/100/100"></img>
<img class="img-responsive signature" srcset="http://www.fillmurray.com/100/100"></img>
<img class="img-responsive signature" srcset="http://www.fillmurray.com/100/100"></img>
</div>
</div>
.copy{
opacity: 1;
position: absolute;
margin:auto;
top:0;
right:0;
bottom:0;
left:0;
}
#wrapper {
position: absolute;
margin: auto;
top:0;
right:0;
bottom:0;
left:0;
}
#logo {
position: absolute;
}
#wrapperSig {
display: inline;
position: absolute;
width: 420px;
margin: auto;
top:60%;
right:0;
bottom:0;
left:0;
}
.signature {
opacity: 1;
display: inline !important;
position: relative;
}
If I understand you correctly, you want the small images to drop down below the bigger one on small screens? Would this work by removing position absolute on everything but the wrappersig? http://codepen.io/jfoutch/pen/pjmEgq
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
.copy{
opacity: 1;
margin:auto;
top:0;
right:0;
bottom:0;
left:0;
}
#wrapper {
margin: auto;
top:0;
right:0;
bottom:0;
left:0;
}
#logo {
}
#wrapperSig {
display: inline;
position: absolute;
width: 420px;
margin: auto;
top:60%;
right:0;
bottom:0;
left:0;
}
.signature {
opacity: 1;
display: inline !important;
position: relative;
}
I have an image in the center of a div
The image is centered in the parent div using the following css:
img { margin:0px auto; }
The image can have arbitrary dimensions.
How can I position the Magnifying Glass (zoom) image on top left of the image without using Javascript, while the main image can have any width or height?
User position:relative and position:absolute. Look at the following HTML and CSS.
HTML
<div class="parent">
<div class="test"><img src="http://isc.stuorg.iastate.edu/wp-content/uploads/sample.jpg" border="0" />
<img src="http://www.beyotta.net/images/icon_magnifier.png" border="0" class="absimg" />
</div>
</div>
CSS
.parent {width:100%; height:400px; border:1px solid blue; text-align:center;}
.test
{
display:inline-block;
position:relative;
}
.absimg
{
position:absolute;
top:5px;
left:5px;
}
FIDDLE DEMO
Giving a position relative to the image and absolute to the magnifying glass image would do the trick here's the demo on what I've done.
http://jsbin.com/yumelamive/5/edit?html,css,output
i am not sure it will work or not but try using before will help
img:before {
content: 'img/zoom.png ';
position:absolute;
top:0px;
left:0px;
}
for proper help atleast provide a jsfiddle or code of your work
Try Use this
jsfiddle
div{
content:"";
display:block;
height:300px;
width:300px;
border:solid 1px #CCCCCC;
background-image: url("http://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg");
position: absolute;
}
div:before {
content:"";
background-image: url("http://icons.iconarchive.com/icons/icontexto/search/48/search-red-icon.png");
top:0;
left:0;
position:absolute;
width: 40px;
height: 48px;
}
I would make a div for the image, set the background the image and add:
position: relative;
for that div. Then put the magnifying glass within the div and set:
position: absolute: top: 0; left: 0;
.image {
background: url(eiffel.jpg);
position: relative;
width: 100px;
height: 200px;}
.image img {
position: absolute;
top: 0;
left: 0:}
The 'relative' is what any 'absolute' objects..relate to.
I hope that helps.
set the image Magnifying Glass to absolute:positionand use left: right: for right position then the parent div set to position:relative
I'm busy on this new website thing, and I run into a problem. Normally, when making the menu, I would just use the entire space, like 100% width and maybe 100px height but now, I need just a portion of that, so there is a whitespace next to the menu on both sides.
I tried to get the square, that carries the menu, to the absolute top of the page, most obvious solution:
position:absolute;
top:0;
But now, the square is also moved to the absolute left of the page, instead I want it centered, but I can't get there. This is a piece of my CSS:
body, html {
background-color: #ecf0f1;
position: absolute;
top: 0;
margin: 0 auto;
}
.navbox {
background-color: #000;
height:100px;
width: 700px;
margin: 0 auto;
}
Is there anyone with the solution?
position:absolute;
top:0;
left:0;
right:0;
Adjust left and right to suit your desired margins.
You would probably want to set your left and right to percentages, using 50% for both will center it:
#menu {
position:absolute;
top:0;
width: 70px;
height:180px;
left: 50%;
right: 50%;
background-color: red;
}
Also, if you are not using absolute positioning you can do the same with this margin-left and margin-right.
jsfiddle
I'm trying to add an image to the bottom of a responsive slider and need help sticking it to the bottom.
When in full screen mode it works fine, but as I shrink the page it keeps floating up, higher and higher.
I know I can set media queries to fix the issue on certain breakpoints, but I'm looking for a more adaptive solution that will work without having to use media queries.
Here is an image of what the slider looks like at full width. (This is fine.)
Then as I start to scale the screen you can notice the grass image moving up.
This is my problem. I need that grass to stay glued to the bottom of the slider.
I don't want to post all the slider code so I made a simple version on JSFiddle.
Here is the code.
HTML:
<div class="pic" align="center"><img src="http://i.imgur.com/8uVGUkM.jpg" class="slider"/></div>
<div class="grassframe"><img src="http://i.imgur.com/vw8soIm.png" class="img-max"/></div>
CSS:
.slider{width:100%; max-width:960px; height:auto; position:relative; z-index:1;}
.grassframe {
position:relative;
max-width:1200px;
margin:-135px auto;
z-index:2;
}
.img-max { width:100%; height:auto; }
I created a JSFiddle if someone wouldn't mind taking a look.
You can use absolute position and margin-top with % value. DEMO
Vertical padding or margin using % value use the parent's width as reference. So once tuned it will worke with any width.
.slider {
width:100%;
max-width:960px;
height:auto;
position:relative;
z-index:1;
border:solid;
}
.grassframe {
position:absolute;
margin-top:-12.5%;
max-width:1200px;
left:0;
right:0;
z-index:2;
}
.img-max {
width:100%;
height:auto;
}
If you use a wrapper in relative position and set to same max-width, it even works better (grass in absolute or relative position doesn't matter much here as long as z-index is avalaible ): DEMO
.slider {
width:100%;
max-width:960px;
height:auto;
position:relative;
z-index:1;
border:solid;
}
.grassframe {
position:relative;
margin-top:-12%;
max-width:1200px;
left:0;
right:0;
z-index:2;
}
.img-max {
width:100%;
height:auto;
}
.container {
position:relative;
margin:auto;
max-width:1200px;
}
Try out the below code:
HTML
<div class="pic" align="center">
<img src="http://i.imgur.com/8uVGUkM.jpg" class="slider" />
<div class="grassframe"></div>
</div>
CSS
.pic {
position: relative;
}
.slider {
max-width:100%;
}
.grassframe {
background: url("http://i.imgur.com/vw8soIm.png") no-repeat scroll center top / 1920px auto rgba(0, 0, 0, 0);
bottom: -87px;
height: 310px;
position: absolute;
width: 100%;
}
Have a look at the JSFiddle
I have made a background that needs to cover the whole page. I know this is a simple question to most of you, but i have tried everything!!! Every time i try something, it just covers the parent div. I want it to cover the entire webpage! Here is what i have so far.
<div id="bkgrd" style="z-index: 9999; display: none; position:absolute;top:25%;left:25%;right:25%;
bottom:25%;
margin:auto;
min-width:50%;
min-height:50%; background-color: #000000; opacity: 0.4;"></div>
#bkgrd {
position:fixed;
top:0;
left: 0;
width:100%;
height:100%;
}