I am trying to achieve two fixed banners on either side of my sites wrapper. I have used absolute positioning to attach the banner divs to each side of the wrapper and have set a fixed background within each so the banner follows the users down the page.
I seem to be having issues setting the background position of the banners, the background position does not seem to be relative to the parent div. I would like the banner backgrounds to be centered within the divs.
Code and example site
<style>
.page-container {
position: relative;
background: #FFF;
width: 970px;
margin-left:auto;
margin-right: auto;
background-color:#F00;
}
#left-bg {
width: 306px;
height: 100%;
position:absolute;
top: 0px;
left: -306px;
background:url(http://www.superfreeslotgames.com/basecamp/L-Leovegas-banner.gif);
background-position: center center;
background-attachment: fixed;
}
#right-bg {
width: 306px;
height: 100%;
position:absolute;
top: 0px;
right: -306px;
background:url(http://www.superfreeslotgames.com/basecamp/R-Leovegas-banner.gif);
background-position: top center;
background-attachment: fixed;
background-position: center right;
}
</style>
<div class="page-container">
<div id="left-bg"></div>
<div id="right-bg"></div>
</div>
change your CSS like this:
.page-container {
position: relative;
background: #FFF;
width: 970px;
margin-left:auto;
margin-right: auto;
background-color:#F00;
}
#left-bg {
width: 306px;
height: 100%;
position:absolute;
top: 0px;
left: -306px;
background:url(http://www.superfreeslotgames.com/basecamp/L-Leovegas-banner.gif) no-repeat 100% 0;
}
#right-bg {
width: 306px;
height: 100%;
position:absolute;
top: 0px;
right: -305px;
background:url(http://www.superfreeslotgames.com/basecamp/R-Leovegas-banner.gif) no-repeat 100% 0;
}
Also, unless you're doing it by design, you should consider changing right: -305px; (which I also changed from your column because it adds a 1px blank space to the left of the column) to right:0
Related
I have a container of a given size, and I have an image inside it. I want the image to expand to either 100% height or 100% width, depending on whichever comes last, and I want it to keep its aspect ratio, so anything sticking on over the container is cropped off. If it's cropped on the sides, I'd also like it to be centered.
So to be clear, if it's a very wide picture, it would have height: 100%, and if it's a very tall picture, it would have width: 100%.
For example, here's the container and the image, with is neither sized correctly, nor centered:
https://jsfiddle.net/y5px1ch9/1/
<div class="wrapper">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/S%C3%A4ugende_H%C3%BCndin.JPG/800px-S%C3%A4ugende_H%C3%BCndin.JPG" class="picture">
</div>
.wrapper {
position: relative;
left: 40%;
width: 100px;
height: 200px;
border: 1px black solid;
overflow: hidden;
text-align: center;
}
.picture {
position: relative;
min-height: 100%;
min-width: 100%;
height: auto;
width: auto;
margin: auto;
left: 0;
right: 0;
background-position: center;
}
Anyone know if this is possible to do with CSS?
Since you have a fixed size wrapper, and as object-fit does not have that good browser support, I suggest you use background/background-size on the wrapper
Now, by setting its position, you control where it should get cropped. In below sample I used left top, which means it crops at right/bottom, and in your case, you might want center center, which will crop equally top/bottom or left/right, based on which of the two overflows.
Updated based on a comment
One can also set the image source in the markup, just how one do with the img, here done by setting background-image: url() inline.
.wrapper {
position: relative;
left: 40%;
width: 100px;
height: 200px;
border: 1px black solid;
overflow: hidden;
text-align: center;
background-repeat: no-repeat;
background-position: left top;
background-size: cover;
}
<div class="wrapper" style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/S%C3%A4ugende_H%C3%BCndin.JPG/800px-S%C3%A4ugende_H%C3%BCndin.JPG)">
</div>
And here is the version using object-fit
.wrapper {
position: relative;
left: 40%;
width: 100px;
height: 200px;
border: 1px black solid;
overflow: hidden;
text-align: center;
}
.picture {
position: relative;
height: 100%;
width: 100%;
object-fit: cover;
object-position: left top;
}
<div class="wrapper">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/S%C3%A4ugende_H%C3%BCndin.JPG/800px-S%C3%A4ugende_H%C3%BCndin.JPG" class="picture">
</div>
It is possible but you have to know the aspect ratio beforehand, knowing this you can reserve space for the image
div {
width: 100%;
overflow:hidden;
position:relative;
}
div::after {
padding-top: 56.25%; /* percentage of containing block _width_ */
display: block;
content: '';
}
div img {
display: block;
width:100%;
height:auto;
position: absolute;
top: -9999px;
bottom: -9999px;
left: -9999px;
right: -9999px;
margin: auto;
}
<div>
<img src="https://placehold.it/200x300"/>
</div>
The main trick is the padding-top: 56.25%;... the aspect ratio
If you define the image as a background-image, then you can use background-size: contain - this does what you want:
.wrapper {
position: relative;
left: 40%;
width: 100px;
height: 200px;
border: 1px black solid;
background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/S%C3%A4ugende_H%C3%BCndin.JPG/800px-S%C3%A4ugende_H%C3%BCndin.JPG) no-repeat center center;
background-size: contain;
}
<div class="wrapper">
</div>
try this
vertical
.picture {
position: relative;
height: 100%;
width: auto;
margin: auto;
left: 0;
right: 0;
background-position: center;
}
horizontal
.picture {
position: relative;
width: 100%;
height: auto;
margin: auto;
left: 0;
right: 0;
background-position: center;
}
jsfiddle horizontal case
jsfiddle vertical case
please add height property auto and image width in percentage %, in this property you can manage aspect ratio,
width:50%,
height:auto,
Hello Stack overflow users.
I'm in a bit of a struggle here, I have 4 divs.
I would like for div 4 to have it's width adjusted if the screen size is adjusted. Basically just stay within the other divs, and adjust.
Div 1,2 and 3 all have position:fixed to avoid them from moving when a user scrolls on the page.
But whatever I try, with width:autoETC. div 4 keeps going the full length behind div 3. I have a margin set for it to pass by div 1's width length.
I've been having a hard time wrapping my head around this one, the code for my divs are listed below.
.navbar-left {
position: fixed;
width: 325px;
top: 0px;
bottom: 0;
z-index: 1001;
height:auto;
}
.navbar-top{
width:100%;
height:60px;
position:fixed;
top:0;
z-index:1002;
}
.navbar-right{
width: 365px;
top:0;
height:100%;
position:fixed;
right:0;
}
Div 4 is not listed, as the code did not work. Any help is greatly appreciated.
Try this fiddle
If you need to use position fixed (really I didn't understand why) you could use percentage for main div, and pixels for sidebars.
In main div to set the width use this:
width: calc(100% - 400px);
Where 400px is the sum of the width of your both sidebars
HTML
<div clas="container">
<div class="top">top</div>
<div class="left">left</div>
<div class="main">main</div>
<div class="right">right</div>
</div>
CSS
.container {width: 100%; height: 100%;}
.top {
position: fixed;
clear: both;
width: 100%;
height: 20%;
background-color: #d5d5d5;
}
.left {
position: fixed;
top: 20%;
width: 40px;
float: left;
height: 80%;
background-color: green;
}
.main {
width: calc(100% - 80px);
height: 80%;
position: fixed;
top: 20%;
left: 40px;
background-color: grey;
}
.right {
width: 40px;
height: 80%;
position: fixed;
top: 20%;
right: 0;
background-color: green;
}
Try this code...
.div4{ width:calc(100% - 730px);
background-color: green;
margin:0 auto;
position:relative;
top:60px;}
where 730px is sum of left and right div widths...
Use percents for navbar-left, navbar-right and the middle portion.
Do not forget to set top:60px (height of navbar-top) for the left and right divs.
jsFiddle Demo
/* *CSS:* */
div {
position: relative;
box-sizing: border-box;
}
.navbar-top {
position: fixed;
width: 100%;
height: 60px;
top: 0;
left: 0;
z-index: 2;
}
.navbar-left {
position: fixed;
width: 20%;
height: 100%;
top: 60px;
left: 0;
z-index: 1;
}
.navbar-right {
position: fixed;
width: 20%;
height: 100%;
top: 60px;
right: 0;
}
.myBody {
width: 60%;
margin: 60px auto 0px;
}
.navbar-top {
background: blue;
}
.navbar-left {
background: red;
}
.navbar-right {
background: green;
}
.navbar-top {
background: wheat;
}
<!-- **HTML:** -->
<div class="navbar-top">navbar-TOP</div>
<div class="navbar-left">navbar-LEFT</div>
<div class="navbar-right">navbar-RIGHT</div>
<div class="myBody"> My body lies over the ocean... hummmmm </div>
Give each a width that will equal to 100%. Give left div 20% div 4 60% and right div 20%. Or, with existing code, give 4th div 100%.
I have a div with background image put inside another div, instead of fit width parent div, it fit full screen. Please take a look my code to know clearly, sorry for bad english.
http://codepen.io/thehung1724/full/jEEgQq/
HTML
<div id="video-section" class="dark-section">
<div class="home"></div>
<div class="fullscreen-img" style="background-image: url(http://upanh.biz/images/2014/11/23/bg1.jpg)"></div>
</div>
CSS
*{
margin: 0;
padding: 0;
}
#video-section{
margin: 0 auto;
width: 1230px;
height: 500px;
}
.dark-section{
background-color: black;
}
.home{
display: table;
height: 500px;
left: 0;
position: relative;
top: 0;
width: 100%;
}
.fullscreen-img {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
height: auto;
left: 0;
min-height: 500px;
position: fixed;
top: 0;
width: 100%;
z-index: -1;
}
Thank in advance.
The .home div needs to be absolutely positioned in order not to "push" the background div downwards. The background div shouldn't have the fullscreen-img class, since most of those rules should be removed. It only needs height: 100% because divs have width: 100% by default since they're block elements. Of course, move the inline styles into a class or ID rules, I left them there just to show you.
That's all you need basically:
remove the .fullscreen-img class from the background div
set its height to 100% instead
make the .home div absolutely positioned
See it here: http://codepen.io/anon/pen/azzexY
*{
margin: 0;
padding: 0;
}
body {
background-color: black;
}
#video-section{
margin: 0 auto;
width: 1230px;
height: 500px;
}
.dark-section{
background-color: black;
}
.home{
display: table;
height: 500px;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
<div id="video-section" class="dark-section">
<div class="home"></div>
<div class="" style="height: 100%; background-image: url(http://upanh.biz/images/2014/11/23/bg1.jpg)"></div>
</div>
UPDATE
Fixes/changes for your website for the problematic element (<div style="background-image: url('images/bg2.jpg');" class="fullscreen-img img-after"></div>):
left: initial;
width: 1230px;
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 would like to align a image in the middle. Very easy by giving the div a width and a margin: auto;. But the div should also carry the position: fixed; property, which doesn't go together as it turns out.
Here is my HTML:
<div class="header_container">
<div class="header">
<div class="header_links_icon">
<a href="https://www.facebook.com target="_blank" class="header_facebook">
<div class="header_facebook_icon"> </div>
</a>
<a href="https://twitter.com/" target="_blank" class="header_facebook">
<div class="header_twitter_icon"> </div>
</a>
</div>
</div>
</div>
And here is the CSS I'm using:
.header_container {
background-color: black;
padding-top: 35px;
}
.header {
background-image: url('../images/css/header.png');
background-repeat: no-repeat;
height: 605px;
margin: auto;
width: 1440px;
position: fixed
}
And it's the header.png image that should be aligned in the middle of the screen AND being positioned fixed... How can I manage to do this?
You could make your header container fixed, then your .header would work:
.header_container {
background-color: black;
padding-top: 35px;
position: fixed;
top:0;
left:0;
right:0;
}
.header {
background-image: url('../images/css/header.png');
background-repeat: no-repeat;
height: 605px;
width: 1440px;
margin: auto;
}
The other way would be with negative margins:
.header {
background-image: url('../images/css/header.png');
background-repeat: no-repeat;
height: 605px;
width: 1440px;
position: fixed;
left: 50%;
margin-left: -720px;
}
You have to set the left position to fifty percent and the margin-left to one half the element's width. This only works for items that have a set width.
http://jsfiddle.net/W9ZcY/
.header_container {
background-color: black;
padding-top: 35px;
border: 1px solid red;
}
.header {
border: 1px solid blue;
background: gray;
height: 105px;
left: 50%;
margin-left: -70px;
width: 140px;
position: fixed
}
The issue is that you can either position a fixed element with percentages or pixels. Neither of them will do the proper offset calculation to make it truly centered. So you must sortof hack the placement to make it behave properly.
Positioning by percentage and offsetting with negative margins:
//assuming the block is 200px wide and 100px tall
.centered {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
Alternatively, you can center it by fixing placement of a container then center your object within that container (as mentioned by #rgthree), this also works.
This will probably work:
.center {width:1440px;margin:0 auto;}
.header {width:1440px;position:fixed;etc...} // don't use margin:auto here
where
<div class='header_container>
<div class='center'>
<div class='header'>
<!-- contents -->
</div>
</div>
<div>
Hi you can give the fixed position to the main header_container class so that will work.
.header_container {
background-color: black;
position: fixed;
top:0;
left:0;
right:0;
}
.header {
background:green;
height: 100px;
width: 500px;
margin: auto;
}
please see the demo:- http://jsfiddle.net/rohitazad/W9ZcY/17/
Give position fixed in your parent header class rather than using fixed position in header child class...
.header_container {
position: fixed;
top:0;
left:0;
right:0;
}