I have two divs. First acts as a banner of sorts. The next is just a small div that I'm trying to place directly below the first div. I've tried taking away float and adding clear: both. Perhaps I'm missing something? Below is my html and css
<div id="background">
</div>
<div id="us">
</div>
#background
{
width: 100%;
height: 10%;
position: absolute;
left: 0px;
top: 0px;
border:1px solid #000;
background-color:black;
background-image: url(resources/images/****.png);
background-repeat: no-repeat;
background-position: center;
clear: both;
}
#us
{
display: block;
width: 165px;
height: 200px;
left: 0px;
align-top: auto;
position: absolute;
background-image: url(resources/images/*****.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
The first div does appear at the top of the page and displays correctly. The second one appears over top of the first div. Any advice?
Check this out.
Fiddle
Just add top:10%; to your #us because you are using position:absolute.
The size of your top in #us must be the same size with your height in #background. I also added box-sizing:border-box; for you borders not to take space.
try this one
#us
{display: block;
width: 165px;
height: 200px;
left: 0px;
align-top: auto;
**margin-top: 50px;**
background-image: url(resources/images/*****.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
You have used position: absolute; in CSS of second div(#us) that's why it is showing on top of first div. Change that to position: relative; or delete that line.
And you are ready to go.
Related
I have made a codepen to explain my problem:
When the user scroll, the blue images should follow the user scroll
The blue images should be stuck on the opposite side of the aside parts (right for the left one | left for the right one)
The pb is that
background-attachment : fixed;
isn't working this the css rule
background-position: left 0px;
Someone can help me by forking the codepen to show me a working implementation ?
.wrapper {
display: flex;
}
main {
background-color: red;
height: 1000px;
max-width: 992px;
width: 100%;
}
aside {
min-width: 150px;
background-color: green;
}
.left {
background-image: url(http://www.bodyacademy.fr/wp-content/uploads/2015/02/Bande_bleu1-100x500.png);
background-repeat: no-repeat;
background-position: right 0px;
/*background-attachment: fixed; Doesn't work*/
}
.right {
background-image: url(http://www.bodyacademy.fr/wp-content/uploads/2015/02/Bande_bleu1-100x500.png);
background-repeat: no-repeat;
background-position: left 0px;
/*background-attachment: fixed; Doesn't work*/
}
<div class="wrapper">
<aside class="left"></aside>
<main></main>
<aside class="right"></aside>
</div>
Why is this happening?
This is working as intended, when you use background-position: fixed; the background is positioned relative to the viewport. This means in your example the background is now aligned on the very left of the viewport outside of the .right element.
You can see this by positioning .right along the left edge of the viewport in the snippet below.
.wrapper {
display: flex;
}
main {
background-color: red;
height: 1000px;
max-width: 992px;
width: 100%;
}
aside {
min-width: 150px;
background-color: green;
}
.left {
background-image: url(http://www.bodyacademy.fr/wp-content/uploads/2015/02/Bande_bleu1-100x500.png);
background-repeat: no-repeat;
background-position: right 0px;
/*background-attachment: fixed; Doesn't work*/
}
.right {
background-image: url(http://www.bodyacademy.fr/wp-content/uploads/2015/02/Bande_bleu1-100x500.png);
background-repeat: no-repeat;
background-position: left 0px;
background-attachment: fixed;
order: -1;
}
<div class="wrapper">
<aside class="left"></aside>
<main></main>
<aside class="right"></aside>
</div>
What can you do?
There is no way to position the background relative to the element when using background-position: fixed; but you can achieve a similar desired result by using a position: fixed; pseudo element:
Add a new selector .left:before, .right:before with the following rules
background-image: url(http://www.bodyacademy.fr/wp-content/uploads/2015/02/Bande_bleu1-100x500.png); - The background image
background-repeat: no-repeat; - Stop the background from repeating
content: ""; - Required for the pseudo element to show
position: fixed; - Set the pseudo element to be fixed relative to the viewport
height: 100%; - Make the pseudo element fill the entire height
width: 100px; - Same as the width of the background image
.wrapper {
display: flex;
}
main {
background-color: red;
height: 1000px;
max-width: 992px;
width: 100%;
}
aside {
min-width: 150px;
background-color: green;
}
.left {
direction: rtl;
}
.left:before, .right:before {
background-image: url(http://www.bodyacademy.fr/wp-content/uploads/2015/02/Bande_bleu1-100x500.png);
background-repeat: no-repeat;
content: "";
position: fixed;
height: 100%;
width: 100%;
}
.left:before {
background-position: right top;
}
.right:before {
background-position: left top;
}
.right div {
position: relative;
}
<div class="wrapper">
<aside class="left"></aside>
<main></main>
<aside class="right">
<div>content</div>
</aside>
</div>
Please note, if you intend to put other content into .right you will need to add position: relative; to the element to set the stacking context above the pseudo element (see the div in the snippet).
Why does this work?
position: fixed; fixes the element to a set position relative to the viewport. By not setting a bottom, left, right or top position the pseudo element stays where it is originally positioned. The background can them be applied to the element in the usual way.
The problem is that you don't scroll the aside because you scroll the body
You should avoid that because it's not responsive but you can get the idea of it
.wrapper {
width: 558px;
background-color: green;
background-image: url(http://www.bodyacademy.fr/wp-content/uploads/2015/02/Bande_bleu1-100x500.png), url(http://www.bodyacademy.fr/wp-content/uploads/2015/02/Bande_bleu1-100x500.png);
background-repeat: no-repeat, no-repeat;
background-position: left 47px top 0px, right 104px top 0px;
background-attachment: fixed;
}
main {
background-color: red;
width: 280px;
height: 1000px;
margin: 0px auto;
}
<div class="wrapper">
<aside class="left"></aside>
<main></main>
<aside class="right"></aside>
</div>
I have a fixed menu, after it I have a div which have fixed background-image. Problem is that menu overlap second image (so 100 px of image located under menu).
Example Link: http://codepen.io/gorez16rus/pen/GZjgNB
Image link: http://www.mygracefalls.com/wp-content/uploads/2014/03/upcoming-events_std_t-e1374861489324.jpg
Menu:
.home-wrap header{
width: 100%;
height: 100px;
background-color: white;
position: fixed;
z-index: 10;
}
Div:
.event-box{
width: 100%;
height: 520px;
padding: 0;
background-image: url('http://www.mygracefalls.com/wp-content/uploads/2014/03/upcoming-events_std_t-e1374861489324.jpg');
background-repeat: no-repeat;
background-size: contain;
background-position: top center;
background-attachment: fixed;
overflow: hidden;
z-index: 3;
position: relative;
}
The easiest way to fix this, is to change the background-position of the image:
background-position: center 100px;
Modified version of your code on Codepen
I have a webpage with an background-image with background-size:cover.
Now I want to overlay this background-image with certain div's, which contain additional informations. These div's have to be at an exact position relative to the background image, even though I resize the broswer window.
That's just one attempt that didn't work.
HTML
<body>
<div class="icon">
<div class="background picture_rendering"></div>
</body>
CSS
.background {
width:100%;
height:100%;
background-image: url(images/bg.jpg);
background-size: cover;
z-index: 0;
position: absolute;
}
.icon {
width: 100%;
height: 100%;
left: 0px;
top: 0px;
position: relative;
background-image: url('/images/icon.jpg');
background-size: 5% auto;
background-position: 227px center;
background-attachment: fixed;
}
It should be something like the map-tag: http://www.w3schools.com/tags/tag_map.asp But instead of links there should be icons.
I hope you understand :-)
Best regards,
The One
Basically you can create a parent or wrapper element which would have the background image and then place all the elements like icons etc inside this and do all your positioning etc. So I've created this for you:
CSS
.container {
background: url(http://www.w3schools.com/tags/planets.gif) no-repeat;
width: 145px;
height: 126px;
position: relative;
}
.icon {
position: absolute;
width: 30px;
height: 30px;
border-radius: 100%;
z-index: 2;
}
.icon1 {
background: green;
top: 20%;
right: 10%;
}
.icon2 {
background: red;
bottom: 10%;
left: 10%;
}
HTML
<div class="container">
<div class="icon icon1"></div>
<div class="icon icon2"></div>
</div>
Here is an example on jsFiddle http://jsfiddle.net/j5cgt22z/
So each icon is positioned inside the container, the planets need to use position:absolute to float them around in the container space but the container needs to have position:relative so they are positioned in relation to their parent http://css-tricks.com/absolute-positioning-inside-relative-positioning/
You can then use z-index on each position:absolute icon to stack each icon so the higher the z-index higher up the stack.
Hope this helps
After realising that there is no general solution for the problem yet. (object-fit isn't widely support).
I used the jquery-Plugin imagefill.js.
CSS
.background {
width:100%;
height:100%;
top: 0;
left: 0;
background-image: url(http://connect.homes.com/wp-content/uploads/2012/05/200392710-0012.jpg);
background-size: cover;
z-index: 0;
position: absolute;
background-position: center center;
}
.container_icons
{
position: absolute;
height: 100%;
width: 100%;
}
.test
{
position: absolute;
background-image: url('http://www.clipartbest.com/cliparts/ncX/qyL/ncXqyLdcB.png');
background-size: 70px auto;
background-repeat: no-repeat;
background-position: 17% 49%;
}
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/2.1.0/jquery.imagesloaded.min.js"></script>
<script src="http://johnpolacek.github.io/imagefill.js/js/jquery-imagefill.js"></script>
<div class="background"></div>
<div class="container_icons"><img class="test" src="http://upload.wikimedia.org/wikipedia/commons/8/8c/Transparent.png" width="3869px" height="2574px" /></div>
<script>
$('.container_icons').imagefill();
</script>
Here is a jsfiddle --> It doesn't work as good as on my webpage ;-)
I have created a div with a class called "responsive_image" and inside that div i have a img tag. The code is,
<div class="responsive_image">
<img src="img1.png"/>
</div>
The css code is,
.responsive_image {
position: relative;
background: url(images/laptop.png) no-repeat center #f0f0f0;
width: 100%;
height: 190px;
text-align: center;
background-size: contain;
background-position: center;
}
.responsive_image img {
width: 240px;
height: 160px;
position: absolute;
top: 6%;
left: 16%;
max-width: 100%;
height: auto;
display: block;
}
Actually, the laptop.png image is the original laptop image with size of 310x186 and inside that, a image with the size of 240x160 and that should correctly fixed inside the laptop image.
From the above code, everything seems to be work perfectly but while going for responsive, each and every time i need to adjust the top and left section in the .responsive_image img. Is there any solution so that i no need to alter top and left?
You have to remove width:100% from the .responsive_image class. And give width:310px as per your laptop image size
Also you have used percentage with top and left position. Change it with pixel. As percentage have always dynamic behavior as per the screen size. USE percentage only when you built a main structure of the html.
.responsive_image {
position: relative;
background: url(images/laptop.png) no-repeat center #f0f0f0;
width: 310px;
height: 190px;
text-align: center;
background-size: contain;
background-position: center;
}
.responsive_image img {
width: 240px;
height: 160px;
position: absolute;
top: 20px;
left: 20px;
max-width: 100%;
height: auto;
display: block;
}
Hope you all will be fine..!
I just started converting a PSD to HTML as i am beginner learner so did bad HTML/CSS programming,so here i am facing an issue now,that has alot of white space right in the last of content and before footer which need to be removed.
here is the link to the Index.html page : http://www.webngraphicssolutions.com/urgent_psd/index.html
waiting for you people replies..
ok you have placed top:1250px, which is very high, so you should make it around 20-30px.
So check your style.css file and find the below code :
#footer {
background-image: url(../images/footer_back.png);
background-repeat: no-repeat;
background-position: bottom;
overflow: hidden;
position: relative;
top: 1250px; /* cahnge here - make it 20px */
padding: 150px 150px 150px 150px;
}
So find the above block at style.css file and do change as mention above.
Your CSS
#footer {
background-image: url(../images/footer_back.png);
background-repeat: no-repeat;
background-position: bottom;
overflow: hidden;
position: relative;
top: 1250px; // this is causing the white space..!!
padding: 150px 150px 150px 150px;
}
remove this top: 1250px;
and add bottom:0; for the footer
Try
#footer {
background-image: url(../images/footer_back.png);
background-repeat: no-repeat;
background-position: bottom;
overflow: hidden;
bottom:0;
padding: 150px 150px 150px 150px;
}
or you could also give top:50px// a reasonable space
Try
#footer {
background-image: url(../images/footer_back.png);
background-repeat: no-repeat;
background-position: bottom;
overflow: hidden;
position: relative;
top: 50px;
padding: 150px 150px 150px 150px;
}
You have stated top: 1250px; to the footer, that's why it's going down.
Remove the top in here:
#footer {
background-image: url("../images/footer_back.png");
background-position: center bottom;
background-repeat: no-repeat;
overflow: hidden;
padding: 150px;
position: relative;
top: 1250px;
}
Like this:
#footer {
background-image: url("../images/footer_back.png");
background-position: center bottom;
background-repeat: no-repeat;
overflow: hidden;
padding: 150px;
position: relative;
}
Footer div is absolutely positioned 1250px down and has a top padding of 150px.
Reduce/remove these and you should be happy. Define padding with more than one value, when two values the first one is top/bottom, second is left and right. Try
padding: 20px 150px;
or adjust to taste.
P.S. This site is probably not going to look very good on tablets/mobiles - I suggest you try and get the site to look good on small displays and read articles on responsive design...