I have the following html:
<div class="fix-to-top">
<div class="background-image"></div>
</div>
I want to be able to fix the position of the image to the top of the page -- so that it is always at the top of the page no matter how far down the user scrolls. In addition, I want the image to always stay in the center of the page, so if a user re-sizes his browser, the image stays in the center. Here is what I tried, but wasn't getting the result:
.fix-to-top {
position: fixed;
top: 0px;
width: 2000px;
}
.fix-to-top .background-image {
margin: 0 auto;
}
However, the side margins aren't doing 'auto'. How would I correctly do this?
img {
position: fixed;
right: 50%;
width: 100px;
height: 100px;
margin-top: -50px;
margin-right: -50px;
background: orange;
top: 50%;
}
http://jsfiddle.net/jXdxr/1/
Check this fiddle
No need of using two div's
You can use background-attachment and background-postion properties to achieve it
Related
I have an image I want to have come out of the website from the left and right side. See the image for what I have so far.
I managed to get it to work by giving the div the image on the left is in a position absolute and a left of -30px, but when I do the opposite for the image on the right (aka position:absolute and right:-30px), the image doesn't get cut off like it does on the right side.
Instead, the page get wider to have space for the image on the right. I have no idea as to how to get this to work and I also don't really know how to word this issue and my searches have come up barely anything to do with what I'm trying to find.
Below the HTML for both sides:
<div class="imgdecalleft">
<img src="images/img/patroon.svg" alt="patroon">
</div>
</div>
<div class="imgdecalright">
<img src="images/img/patroon.svg" alt="patroon">
</div>
And the subsequent CSS:
.imgdecalleft {
width: 15%;
position: absolute;
left: -30px;
}
.imgdecalright {
width: 15%;
position: absolute;
right: -30px;
}
Add this:
body {
overflow-x: hidden;
}
Here is an alternate approach that relies on setting the image width to the width of the container div and then offsetting the image inside the container. Using overflow in this case only effects these divs and their images.
This should still allow the page to be scrollable horizontally on narrow screens.
.imgdecalleft {
width: 30%;
position: absolute;
left: 0px;
overflow: hidden;
}
.imgdecalleft img {
width: 100%;
position: relative;
left: -50%;
}
.imgdecalright {
width: 30%;
position: absolute;
right: 0px;
overflow: hidden;
}
.imgdecalright img {
width: 100%;
position: relative;
left: 50%;
}
<div class="imgdecalleft">
<img src="https://cdn.pixabay.com/photo/2012/03/01/15/47/abstract-20445_960_720.jpg" alt="patroon">
</div>
</div>
<div class="imgdecalright">
<img src="https://cdn.pixabay.com/photo/2012/03/01/15/47/abstract-20445_960_720.jpg" alt="patroon">
</div>
I have a top div on my page, but above my navigation.
I want the company logo in the middle of this div. however, margin: 0 auto isn't working.
I've tried fiddling with the div positioning to be absolute and the image to be relevent, and vice versa.
I've tried the image to be center aligned, text aligned (silly enough), even left: 50%. left: 50% does actually work but because the width of the image is over 100px, then the logo isn't centered any more, even though the beginging of the image is at 50%.
I wanted to make it left 30% but that isn't fair on all screen sizes.
I just cant figure out how to make this image in the center of the div. Does anyone know how I can do this?
HTML
<div id="stripes">
<img src="JCC.gif" class="JClogo" />
</div>
<div id="navigation">
CSS
#stripes
{
width: 100%;
height: 185px;
background-image: url('stripes.png');
}
.JClogo
{
position: absolute;
margin: 0 auto;
height: 194px;
width: 389px;
}
if you positioned the element as absolute then margin 0 auto won't be work
Remove the position: absolute; and add display:block toJClogo css class.
.JClogo{
margin: 0 auto;
height: 194px;
width: 389px;
display:block;
}
JsFiddle Demo
I don't think margin:0 auto will work with absolute positioning. Either remove the position:absolute OR place left:50%; margin-left:-195px on .JClogo.
This should do what you're looking for:
#stripes
{
width: 100%;
height: 185px;
background-image: url('stripes.png');
text-align:center;
}
.JClogo
{
height: 194px;
width: 389px;
}
The issue is because of the code at:
position: absolute; // here
margin: 0 auto;
height: 194px;
width: 389px;
Position absolute makes it to float at the parameters provided.
So try out this, this will make the image float at the center of the element.
position: absolute;
top: 20%; // this
left: 20%; // and this
height: 194px;
width: 389px;
This way, you will change the parameters of the image and make it float where you want it to be. If you want to use position: absolute; otherwise, you can remove this and simply use margin: values.
let's say I have to place an image RIGHT in a proper spot, but I need its CENTER to be in that spot. I wanted to place an image in the top-left corner of a div, so I placed the image in the div, gave position: relative to the div and position: absolute to the image then set its top and left values to 0. It quite worked but I'd need the CENTER of that image to be right over the top left corner. I'd do it manually setting top: -xpx, left: -ypx BUT I don't have any specific value for the image size (which could vary a lot).
So is there any way to say something like: position: absolute-but-i'm-talking-about-the-center; top: 0px; left: 0px;?
Thank you very much indeed!
Matteo
You could use javascript yo get the size of the image and then set the css left value needed.
Be mindful of the way images are loaded though as they are asynchronous so will not necesserily be available when the document is ready. This means that unless you handle the images correctly you will end up with width and height dimensions of 0.
You should wrap the image in another block element and put a negative left position to the image.
Something like this:
<div id="something">
<div class="imagewrap">
<img>
</div>
</div>
Then give #something a relative position, .imagewrap an absolute, etc... And img should have a relative position with left:-50%. Same for the top.
have you tried;
name_of_div_with_image {
display: block;
margin-left: auto;
margin-right: auto }
give that a go.
No need to use Javascript, this can be done in CSS.
The required HTML: (you must change the div to an img obviously)
<div id="container">
<div id="imgwrapper">
<div id="img">Change this div-tag to an img-tag</div>
</div>
</div>
The required CSS:
#container
{
position: absolute;
left: 200px;
top: 100px;
height: auto;
overflow: visible;
border: 2px dashed green;
}
#imgwrapper
{
position: relative;
margin-left: -50%;
margin-top: -50%;
padding-top: 25%;
border: 2px dashed blue;
}
#img
{
display: block;
width: 200px;
height: 100px;
border: 2px solid red;
}
Click here for a jsFiddle link
The margin-left: 50%; obviously works when using the container div, because the width of the container will be exactly that of the content. (You might need to add width: auto;)
But margin-top: -50%; will not work because the height of the container div will change with it, thus you need yet another wrapper div in which you use this margin-top: -50%; and then you need to fix this error it makes by using a positive percentage based padding. Obviously there may be other solutions to fix this, but the solution should be something like this.
Probably one of the simplest solutions is to place the image in the upper left corner at position
left: 0px; top: 0px; and then use translate to move its center to this position. Here's a working snippet for that:
#theDiv {
position: absolute;
left: 100px;
top: 100px;
background: yellow;
width: 200px;
height: 200px;
}
#theImage {
background: green;
position: absolute;
left: 0px;
top: 0px;
transform: translate(-50%, -50%);
}
<div id="theDiv">
<image width=31.41 height=41.31 id="theImage"></image>
</div>
I am trying to create a HTML page slider, so I have my container div, then sitting on the outside, on the left I have a Previous Icon and on the right I have a Next icon.
My problem is, when I resize the window to smaller screens the icons move into the center of my container, I want them to stay position fixed to the outside of the container at all times when resized.
My container code: -
width: 960px;
margin: 0 auto;
clear: both;
overflow: hidden;
min-height: 449px;
Next and previous code:
a.vehicleSliderLeft {background: url('../img/slider_arrow_left.png');
width: 55px; height: 112px; left: 270px; background-position:0px;
background-repeat: no-repeat; position: fixed; top: 420px;}
a.vehicleSliderRight {background: url('../img/slider_arrow_right.png');
width: 55px; height: 112px; right: 270px; background-position:0px;
background-repeat: no-repeat; position: fixed; top: 420px;}
Any ideas? cheers
You need to give the main container position: relative and then position the arrow elements inside the container with position: absolute.
This then allows you to manipulate where you put both arrows on the page using right: x , left: x , top: x , bottom: x. where x is any number or percentage.
jsFiddle: http://jsfiddle.net/LZG3R/3/
Source: Learn CSS Position in Ten Steps
You should try something like this:
.container{
width: auto;
margin: 0 auto;
clear: none;
}
a.vehicleSliderLeft {
float: left;
}
a.vehicleSliderRight {
float: right;
}
Fiddle: http://jsfiddle.net/EhdkP/1/
inside a main div you can keep each element in separate divs specifying the positions of each div specifying the widths in percentage
I'm creating a website which is white, so I dont have any background assigned. But I want to add some blue gradient details on two parts of the website. #bg_top would be placed on the top to the left and #bg_bottom should be placed on the bottom to the right. Of course this is not working exactly the way I want...
This is how its displayed on my html:
<body>
<div id="bg_top"></div>
<div id="wrapper">
</div>
<div id="bg_bottom">
</div>
<footer>
</footer>
The #bg_top works perfectly. It does display itself behind the wrapper but the bg_bottom is giving me the problem as its well placed, but its visually between the wrapper and the footer. Therefore I used z-index but its also not working. Also the strange thing is that the bottom and left parametres dont make any difference. This is the CSS code:
#wrapper{
width: 925px;
height: 1355px;
margin-left: auto;
margin-right: auto;
position: relative;
}
#bg_top{
width: 500px;
height: 500px;
position: absolute;
top: 0px;
left: 0px;
background-image: url('../_img/2_body/bg/bg_top.jpg');
z-index: -1;
}
#bg_bottom{
width: 500px;
height: 500px;
position: relative;
float: right;
bottom: 0px;
right: 0px;
background-image: url('../_img/2_body/bg/bg_under.jpg');
z-index: -1;
}
Could somebody help me? I've tried everything...
thank you
The problem is you are not wrapping the bg_top and bg_bottom inside the wrapper. It works perfectly when you do it.Please find the fiddle I used
http://jsfiddle.net/meetravi/sL5jm/
Good Luck !
With position: relative, if you want it visually inside the wrapper, you need to put the HTML inside the wrapper.
I already got to my answer... I needed the pictures to be behind the wrapper. The bottom picture sticked to the top right part of the footer and the top picture at the same level than the header. Thanks to the input I saw it was very simple...
<body>
<header>
<div id="bg_top"></div>
</header>
<div id="wrapper"></div>
<footer>
<div id="bg_bottom"></div>
</footer>
</body>
So after I applied absolute position and a z-index and picture as backgound done... behind the wrapper and in its place. This was the final CSS code:
#bg_top{
width: 500px;
height: 500px;
position: absolute;
top: 0px;
left: 0px;
background-image: url('../_img/2_body/bg/bg_top.jpg');
z-index: -1;
}
#bg_bottom{
width: 500px;
height: 500px;
position: absolute;
background-image: url('../_img/2_body/bg/bg_under.jpg');
bottom: 155px;
Any other doubts maybe I can help...
right: 0px;
z-index: -1;
}