I have two divs set at 100 pixels absolutely positioned on the left and right sides of the page. I have a content section margined between them. I want the images to scroll with the page as you scroll from top to bottom of the larger pages. There are seven total pages in my site of varying sizes and i am trying to use CSS to make this work. Can anyone help me?
Look at css fixed positioning.
position:fixed; top:0px; left:0px;
See here: http://limpid.nl/lab/css/fixed/left-sidebar-and-right-sidebar
Here is an example that might solve your problem.
It uses the background-attachment:fixed; but you could also use the position:fixed attibute depending on how you want to have your images static in an element or scroll with the page. The issue with the background option is it will require you to design a background image for it, but it will work.
EDIT: Here is an excellent post on fixed positioning and cross browser compatibility.
<div id="image1">
</div>
<div id="image2">
</div>
#image1 {
position: absolute;
width: 100px;
top: 0;
left: 0;
padding: 0;
margin: 0;
background-image: url(../media/warlock.jpg);
min-height: 100%;
height: 100%;
background-position: center;
background-attachment: scroll;
}
#image2 {
position: absolute;
width: 100px;
top: 0px;
right: 0px;
padding: 0;
background-image: url(../media/paladin.jpg);
min-height: 100%;
height: 100%;
background-position: center;
background-attachment: scroll;
background-repeat: repeat;
}
That is basically the code for the two side divs. They are completly void of anything but background images that I want to scroll the length of the page.
Related
I'm trying to replicate the way these images change on this website when you shrink the screen https://sweetbasilvail.com/
I went ahead and added the css I saw from their site, but it still is just shrinking my image on mobile instead of doing of this site is doing
.hero {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: #211f1f;
}
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-size: cover;
background-position: center;
}
So I have this image that I want to be the background for my entire home screen, but if I use this code below and shrink it to mobile, it basically squishes the image.
img {
width: 100vw;
height: 100vw;
}
And on mobile it ends up looking like this
If I use the regular responsive css, it shrinks the image and ends up leaving a huge white space below
img {
width: 100%;
height: auto;
}
So I'm not sure how to display an image as the entire background without sacrificing the quality of the image or distorting the way it looks. Is it normal to just have the image shrink on mobile? or is there a proper way when using a full image background?
Note the 2nd image with the giant white space is what the original image is supposed to look like at 100% width;
Use background-size: cover
#bgimg{
height: 100vh;
width: 100vw;
background-image: url(https://placekitten.com/1000/500);
background-size:cover;
background-position: center;
}
<div id='bgimg'></div>
You want to keep the proportions, so you use width: 100% on a div and change its background image. This is much easier to manipulate than an HTML img tag.
Quick code snippet on CodePen (https://codepen.io/ma-henderson/pen/eYzGwJe?editors=1100)
<div class="container">
<header class="header">
<nav class="header__nav-item">Our Menu</nav>
<nav class="header__nav-item">Our Concept</nav>
<nav class="header__nav-item">Locations</nav>
</header>
<div class="hero"></div>
<footer class="footer">
<nav class="footer__nav-item">Gallery</nav>
<nav class="footer__nav-item">Special Events</nav>
<nav class="footer__nav-item">Catering</nav>
</footer>
</div>
.container {
posiiton: relative;
}
.header{
position: absolute;
top: 0;
left: 0;
width: 100vw;
padding: 1rem 0;
z-index: 3;
color: white;
background: rgba(0,0,0,.3);
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
.hero{
background-image: url("https://images.unsplash.com/photo-1572116469696-31de0f17cc34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1934&q=80");
/* I've added the below line to keep it always centered regardless of viewport width, change it to your liking, you can google "background-position w3 schools" for more info */
background-position: 50% 50%;
height: 100vh;
width: 100vw;
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
.footer{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 1rem 0;
z-index: 3;
color: white;
background: rgba(0,0,0,.3);
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
You have two options, depending on exactly what your use case is.
If you'd like the img to fill the entire screen but without distortion you can use object-fit: cover. Of course, with this if the image is very wide compared to height you will get some bits cropped from the left and right in portrait mode, and conversely top and bottom in landscape mode - but in either case the screen will be covered.
If it's important that the user sees the whole of your image regardless of its aspect ratio in relation to the viewport aspect ratio then use object-fit: contain. This will result in some space either to the sides or the top and bottom of the image depending on how its aspect ratio compares to the viewport's.
object-fit is quite widely available on browsers, but not on any version of IE.
Note: for background-image as opposed to img use background-size: cover or contain.
Doing that is not really ruining the quality, it's stretching it because that is what you are telling it to. The second option is normal, you just want to probably fill it up with content below so that its not white space. But that doesn't fill up the entire screen.
You probably want to use a media query so that the browser detects when the user is on mobile, then you can crop the sides of your image to make it fit without stretching it, either manually using something like Photoshop, or with CSS, which is answered here on how to do it: How to automatically crop and center an image
Ok this is really stumping me, probably because i don't understand it 100%. I have the following code to display a responsive background-image on the header:
.home .site-header-main:before{
display: block;
max-width: 100%;
max-height: 100%;
background-color: transparent;
background-image: url('/images/home-menu/home_honey_drip.png');
background-repeat: no-repeat;
background-size: 100%;
padding-top: 35%;
}
What i want it to do is display the 'home_honey_drip.png' under the menu text and then 'overflow' it over the top of the body content. I have tried adding position: absolute; However the image disappears.
Thank you in advance.
I think you need to use position relative and move the content of the menu to top.
You can do this using two divs, one with the image and other with the menu content.
#menu{
top:-100px;
position: relative;
color:white;
}
You can check my jsfiddle. Just add the rest of the css you need to your image.
so I know pretty much how absolute/relative positioning works and have used it quite extensively in the past. Right now, I do have a website, where I need to position a graphical element so that it 'sticks' to the bottom, regardless of the website/screen dimensions.
I was able to do that for my own screen size, but whenever the height is different (larger), the elements (2 red images, as seen in the example) just 'float' in the middle of the site, instead of the bottom where it should be.
Here's the site
And the code:
<div class='fimage'>
</div>
<div class='fimage2'>
</div>
CSS
.fimage{
background-image: url(img/fimage.png);
height: 236px;
width: 50%;
background-repeat: no-repeat;
float: left;
}
.fimage2{
background-image: url(img/fimage2.png);
height: 236px;
width: 50%;
background-repeat: no-repeat;
float: right;
}
Note that i have 2 separate images positioned left/right. The code is without any positioning now, because I wasn't able to figure it out correctly and always just messed up the whole layout.
Could you give me suggestions on how to position the elements, so they stay right at the bottom?
Thanks.
Kill the floats and position them absolutely, with the bottom and right (or left) set to 0.
.fimage {
background-image: url(img/fimage.png);
height: 236px;
width: 50%;
background-repeat: no-repeat;
position:absolute;
bottom:0;
left:0;
}
.fimage2 {
background-image: url(img/fimage2.png);
height: 236px;
width: 50%;
background-repeat: no-repeat;
position:absolute;
bottom:0;
right:0;
}
I am attempting to make a sidebar for a tumblr page have a curved header and the rest of the sidebar be squared with 100% height so it flows off the "page" with no visible footer. I have layered backgrounds and as you might expect the square background with current coding is going to show at the top of the curve removing the transparent affect I want at the top.
This is the live preview.
Here is the coding used for those side bars:
#left, #right {
background-image: url('http://static.tumblr.com/gxcukg0/VOFn4jkk6/bg-sidehead.png'),
url('http://static.tumblr.com/gxcukg0/6SUn4jkk3/bg-side.png');
background-repeat: no-repeat, repeat-y;
background-color: #b8a6a5;
position: absolute;
min-height: 100%;
top: 0px;
width: 345px; }
Is there a way of accomplishing my goal without making a separate div for the top of each side?
To get this to work, you need to use the :before selector:
#left:before, #right:before{
height: 100px;
width: 345px;
background-image: url('http://static.tumblr.com/gxcukg0/VOFn4jkk6/bg-sidehead.png');
position: absolute;
top: -100px;
content: " ";
}
#left, #right {
background-image: url('http://static.tumblr.com/gxcukg0/6SUn4jkk3/bg-side.png');
background-repeat: repeat-y;
position: absolute;
min-height: 100%;
top: 100px;
width: 345px;
}
Note that I've bumped down the main divs with top: 100px;, bumped up the :before part with top: -100px;, and moved the header background image to the :before.
Oki doki the best way for you to do this would be to use the css style background-position.
For example
img {
background-position :-10px 0px;
}
The above with offset the image by - 10px to the left and 0px to the top.
I hope that helps!
I've made a menu strip that I would like fixed to the bottom center of the page. I've tried everything. Is there a way to do this in CSS? I've gotten the menu to be fixed at the bottom of the page with
bottom: 0px
position: fixed
but using
margin: auto auto 0px auto or margin-left: auto
doesn't seem to center the menu. It's just stuck to the left side of the page. Any thoughts would be greatly appreciated!
display: flex now makes this very easy! See below:
.footer {
position: fixed;
bottom: 0;
width: 100%;
display: flex;
justify-content: center;
}
.content {
background: grey;
}
<div class="footer">
<div class="content">My bottom-fixed content</div>
</div>
With this solution, there is no need to set a fixed width which can be more flexible.
You can use a left property of 50% and a negative left margin equal to half the width of the footer.
http://jsfiddle.net/N7MB5/
#footer {
width: 600px;
position: fixed;
bottom: 0;
left: 50%;
margin-left: -300px;
}
To center an element you need to specify width and set left and right margins to auto.
Then to stick such an element to the bottom of the page you need to wrap it in another element which has fixed width, say 100% and is positioned on the bottom. And yes, css you can.
<section style="position: fixed; bottom: 0px; width: 100%;">
<p style="margin: 0 auto; width: 300px;">Blah blah</p>
</section>
#myElemId {
width: 100px;
}
Note the fixed width; this is essential for margin: auto to work. If this doesn't solve it, then there must be a problem elsewhere.
Edit: You'll also need this (jQuery):
$("#myElemId").css({
left: window.innerWidth/2 - $(this).css("width")/2
});
This allows you to set the width to whatever you want without having to update the rest of the CSS code.