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;
}
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 might be doing something wrong, but I want to cut off my picture on the right side.
#background
{
width: 100%;
height: 100%;
position: fixed;
right: 20em;
left: 20em;
top: 0em;
z-index: -1;
margin-right: 20em;
}
Background is a picture I want to cut off at the right side, 20em in so I tried right margin without luck.
But with the fixed position I can only use left or right and top. Anyone got a smart fix for this?
Image of website as it is
EDIT: So right now the side is cut off on the left side. I want it to be cutted off on the right side too.
I have styled margins to be 20em from left and 20 em from the right. This white transparent picture should only cover that area.
I also need me reputation to post a picture, sadly.
make a div with the good width, and then place the image in it, and apply css to the div:
div {
overflow: hidden;
}
try to comment width and right params. It may help, but I am not sure that this you want
#background {
/* widht: 100% */
height: 100%;
position: fixed;
/* right: 20em; */
left: 20em;
top: 0em;
z-index: -1;
margin-right: 20em;
}
http://cssdeck.com/labs/j7zbc2zs
Fiddle
http://jsfiddle.net/eqE9J/135/
<div id="wrapper">
<img src="http://farm5.static.flickr.com/4017/4717107886_dcc1270a65_b.jpg" alt=""/>
</div>
CSS
div{
max-width:750px;
}
img{
width:80%;
padding:1%;
border:1px solid red;
position: fixed;
right: 20em;
top: 0;
}
Most of my code in a jsFiddle:
http://jsfiddle.net/MilkyTech/suxWt/
The content should load on the first page in a white box, with overflowing content pushing the following sections of the page down. However, as can be seen the lower sections load over the top of the first page white box. I have tried changing the positioning/clears of the various sections but cannot seem to create the necessary movement.
<section class="page1">
<div class="huge-title centered">
<div id='detailsbox'>
<h1 id='eorvtitle'></h1>
<img id='eorvimage' src=''>
<div><p>lots of text lots of text
</div>
</div>
</section>
<section class="page2" id='page2'>
</section>
.page1 {
background: url('../img/bg.jpg')#131313;
background-size: cover;
height: 100%;
position: relative;
}
.huge-title {
position: absolute;
top: -20%;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 100%;
height: 180px;
}
#detailsbox {
top: -4em;
width: 75%;
left: 12.5%;
right: 12.5%;
border: 20px solid white;
border-radius: 10px;
background-color: white;
text-align:center;
position: absolute;
float: left;
clear: both;
}
Absolute Positioning does not push containers down. It places itself above or below them based on the z-indexing. You need to enclose your absolute contents inside a relative container to push other containers downwards similar to those in jquery sliders.
you need to change .huge-title and #detailsbox to position:relative;
you can probably get rid of background-size: cover;
also change .huge-title and #detailsbox to the following:
.page1 {
background: url('../img/bg.jpg')#131313;
height: 100%;
position: relative;
}
.huge-title {
position: relative;
top: 20%;
right: 0;
left: 0;
margin: auto;
height: 100%;
}
#detailsbox {
top: -4em;
width: 75%;
left: 12.5%;
right: 12.5%;
border: 20px solid white;
border-radius: 10px;
background-color: white;
text-align: center;
position: relative;
float: left;
clear: both;
}
The proper function of an absolute position is to overlap content. If you want other content to automatically push down then use relative position.
The solution is to create an empty spacer div with float right or left. This would ensure there is space between the two.
Refer this answer
Absolute positioned elements are removed from the main flow of the HTML. That's why it's not pushing the elements below it down. It's now sitting on top of the elements before and after it rather than in between them.
You may want to check this out.
Whether or not absolute positioning makes sense in your case is hard to say without seeing the design you are trying to implement. Using default (aka "static") or perhaps relative positioning will push the other content down below the white box, but without a deign to look at it's hard to tell if that's the real solution.
You can add another empty section between page1 and page2 and give the css below
height: 100%;
Adding an empty div the size of the absolute entity between the absolute entity and other components may help.
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
I want to place a small circular login image on the border of div such that half image will be outside the border line just for style purpose?I think I have to set z-index but how OR is there any better way?
Thats exactly what you need to do.
Give you img a class name. Then in your style sheet add something like this
#classname
{
position: absolute;
z-index: 10;
top: #distance from top of page#
left: #distance from left of page#
}
z-index needs to be a number greater than your div which will have an index of 0 if you haven't changed it.
Hope this helps.
.overout {
text-decoration:none;
position: relative;
z-index: 10;
top: 105px;
right: -25px;
}
You can do this very easily using divs. Consider the following code
<html>
<head><title>Logo test</title></head>
<body>
<div style="position: relative; width: 400px; height: 100px; margin: 0px auto 0px auto; top: 50px; background-color: #f00;">
<div style="position: relative; height: 100px; width: 100px; background-color: blue; left: 20px; top: -50px;">
</div>
</div>
</body>
</html>
All you have to do is replace the second divs "background-color" property with the "background-image" property and nest that div inside your existing div. Make sure you make the div the exact size of your logo and set background-repeat: no-repeat;
Hope that helps. Test the example code I posted. You can place all the style information into a css class like this:
.logo
{
background-image: url(yourlogo.png);
background-repeat: no-repeat;
width: /* width of logo */
height: /* height of logo */
top: /* distance from top */
left: /* distance from left */
}