I am attempting to make the header/menu bar on this website static (fixed) so that it is always present at the top of the screen, and a particularly long website scrolls 'behind' it. I have accomplished this before on fixed width websites, but this website is fluid width and I have not been able to accomplish this yet without breaking the header.
Could someone potentially tell me where/what I need to edit in my CSS? I believe I need to add a position:fixed; element somewhere, perhaps in this section, but it doesn't seem to accomplish my goal in the same way as on a fixed width website.
.art-header
{
margin:0 auto;
background-repeat: no-repeat;
height: 170px;
position:relative;
background-image: url('images/header.jpg');
background-position: center top;
}
.custom-responsive .art-header
{
background-image: url('images/header.jpg');
background-position: center top;
}
.default-responsive .art-header,
.default-responsive #art-header-bg
{
background-image: url('images/header.jpg');
background-position: center center;
background-size: cover;
}
.art-header-inner{
position: relative;
min-width: 840px;
max-width: 1920px;
width: 50%;
z-index: auto !important;
margin: 0 auto;
}
try this, merge your .art-header & .art-nav inside a div, and class fixed to it like this
<div class="fixed">
//div .art-header & nav .art-nav here
</div>
then add the css for fixed
.fixed {
position: fixed;
z-index: 100;
}
and make some margin for .art-sheet
margin-top: 241px; /*the height of the fixed div*/
here's the JSFIDDLE
Related
I'm stucked. I've tried different solutions but it doesn;t work for me - I do something wrong.
I want to get 2 divs (there is more, but it should be enough to solve the problem): header and menu. Both of them have got background-images. I want to set 'menu' directly below 'header' using responsive approach.
<div id="header_main"></div>
<div id="menu"></div>
i CSS:
#header_main{
background-image: url(../images/headerPapyrus.png);
background-size: 100%;
background-repeat: no-repeat:
margin: 0;
padding: 0;
width:100%;
height: auto;
position: absolute;
}
#menu{
background-image: url(../images/bgMenu.png);
background-size: 100%;
background-repeat: no-repeat:
margin: 0;
padding: 0;
width:100%;
height: auto;
position: absolute;
}
I want to get divwith dimensions in line with its background images widht and height, but responsive. Please give me any adice how I can do it properly.
Right now two images appear on top of each other, that's why you would only be able to see one of them.
Try to wrap them in a seperate div and give display:flex to that div. This way you could achieve what you want I guess.
Change your position on the header to position: relative; and set both of them to display: flex;
Like this:
#header_main{
background-image: url(../images/headerPapyrus.png);
background-size: 100%;
background-repeat: no-repeat:
margin: 0;
padding: 0;
width:100%;
height: auto;
position: relative;
display: flex;
}
#menu{
background-image: url(../images/bgMenu.png);
background-size: 100%;
background-repeat: no-repeat:
margin: 0;
padding: 0;
width:100%;
height: auto;
position: absolute;
display: flex;
}
<div id="header_main">header</div>
<div id="menu">menu</div>
These are specific methods for creating responsive background:
/* Background image is centered vertically and horizontally at all times */
background-position: center center;
/* Background image doesn't tile */
background-repeat: no-repeat;
/* Background image is fixed in the viewport so that it doesn't move when
the content's height is greater than the image's height */
background-attachment: fixed;
/* This is what makes the background image rescale based
on the container's size */
background-size: cover;
And why do you give the elements position absolute and take them out of the normal flow? You can use maybe :
#header_main{
position: relative;
};
#menu{
position: absolute;
top:0;
left:0;
};
I'm trying to make a background image on the header section autosize but it won't keep to aspect ratios. Here is an example, the image gets the bottom of it cut off: http://i.imgur.com/sxedPHI.png or if I make it this size, space appears between it and the divs below header: http://i.imgur.com/xX1e4GZ.png I can almost seem to get it working but then it scales the picture to an odd aspect ratio and the image gets distorted: http://i.imgur.com/jtxDNr0.png
I would like the header section to be the EXACT same size as the image, then have the image always showing all of the image (not cutting off a portion) and no space between header and the next divs.
This is the code I have for the HTML part:
<header>
T
</header>
I believe this is the relevant CSS:
header {
position: relative;
width: 100%;
height: 100%;
text-align: center;
color: #fff;
background-image: url("ball.png");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-repeat: no-repeat;
background-size: 100% auto;
}
The site in question is here:
http://www.stoppiefail.com/boot/sites3/index.php
You are using background-size: 100% auto; at the end which will be overwriting your previous code.
https://jsfiddle.net/26ejdss6/1/
div{
width:400px;
height:187px;
background:url('http://ajgdirect.co.uk/wp-content/uploads/2015/04/football.jpg');
background-size:cover;
background-position:center;
}
Also, check out a neat plugin named backstretch.js. It's pretty nice for this kind of thing, especially when auto-sizing user added images in a CMS
http://srobbin.com/jquery-plugins/backstretch/
Instead of using Background Image why not use an IMG tag with an absolute div on top of it.
HTML:
<header>
<img src="your/background/image.jpg" class="bg">
<div class="headerContent">Your Header Content Goes Here</div>
</header>
CSS:
header {
width: 100%;
position: relative;
}
header img.bg {
width: 100%;
height: auto;
position: relative;
z-index: 0;
}
header .headerContent {
width: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 100;
}
I havn't tested this but it is just another way to do this outside of css, that would allow the height of the header never to be cut off.
I come to you once more for a question. I've got a logo consisting of three elements: TEXT | LOGO | TEXT. The logo part is static. It should always be horizontal + vertical centered. I've accomplished this with a background. The two text parts need to be able to scroll up and down and when it leaves the top of the page a new version should come up from the bottom of the page and stop at the point that it's exactly lined up with the logo again.
I've got this perfectly working on my own desktop which is a 1920 * 1080 resolution. However, i've done this trough padding and pixels.
#logo {
background:none;
padding-top:411px;
}
#logo2 {
background:none;
padding-top:958px;
}
#logo3 {
background:none;
padding-top:962px;
}
Obviously this is not the way to go since on any other resolution the alignment is totally off.
I've created a JSFiddle: http://jsfiddle.net/thedonny/mzr91b4f/
Since the Fiddle shows the output in a smaller screen you already see my problem. I pretty sure im missing something here. Is there anyone that could point me in a right direction on how to pull this of?
Kind regards,
Arjen.
Try this one on for size: http://jsfiddle.net/mzr91b4f/2/
I made each of the #sections 100% the height of the viewport (after setting html, body, and .container-fluid to 100% height). I then made each of the #logos offset from the top by 50% with a margin-top of (approximately) half the height of the image. I did some funky adjustment to the last #logo to get it to be exactly the height of the viewport so the scrollbar stops exactly at the bottom of the window on Section Three. Here is the CSS (a bit reorganized):
html {
height: 100%;
}
body {
background: url(http://i.imgur.com/5rFLWpS.png) repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
}
.container-fluid {
height: 100%;
width: 100%;
}
#sectionone, #sectiontwo, #sectionthree {
height: 100%;
width: 100%;
}
#logo {
background:none;
position: absolute;
top: 50%;
margin-top: -72px;
}
#logo2 {
background:none;
position: absolute;
top: 150%;
margin-top: -72px;
}
#logo3 {
background:none;
position: absolute;
top: 250%;
margin-top: -72px;
bottom: 300%;
margin-bottom: -72px;
}
body {
height: 100%;
background-color: #f8f8f8 ;
background-image: url('images/bottom-right.png'); /*Images*/
background-position: right bottom; /*Positioning*/
background-repeat: no-repeat; /*Prevent showing multiple background images*/
}
so i have this code that put the image in the bottom right of the body, but the problem is its not positioning in the way that i want it. It goes to the right but not in the bottom. It's only as tall as the content inside it, just like a div or anything else. Can u please help me to achieve what i want.
here is the image -> http://tinypic.com/view.php?pic=2iabd3p&s=8 thanks
You also need to set a height on the html and remove the margin on the body:
body {
height: 100%;
background-color: #f8f8f8;
background-image: url('http://www.placehold.it/100x100');
background-position: right bottom;
background-repeat: no-repeat;
margin:0;
padding:0;
}
html {
height:100%;
}
jsFiddle example
Simply setting height: 100%; isn't going to work in all instances. While I generally dislike using CSS2 position too often this may help you in this situation...
body, html
{
bottom: 0px;
left: 0px;
overflow: auto;
position: absolute;
right: 0px;
top: 0px;
}
My page looks like this
<div id="wrapper">
<div id="header"></div>
<div id="main"></div>
</div>
The header has a fixed height.
The main div has a background-image.
I want the main div to be displayed to fill the whole screen, so that the image is displayed at the very bottom.
So I did:
div#main {
background-repeat: repeat-x;
background-position: left bottom;
background-image: url(url);
height:100%;
min-height:100%;
}
This didn't work, how can I set a divs height to fill the whole screen?
Another solution would be to set the image to the body:
body {
background-repeat: repeat-x;
background-position: left bottom;
background-image: url(url);
}
Here I got the problem, that on scroll the image is not fixed at the bottom. It actually fixed to the height of the windows size.
background-attachment: fixed; isn't the solution either, because the background-image doesn't scroll at all.
Clarification
When the content is too large => There is a scroll bar, the background-image isn't fixed at the bottom anymore. That's the main problem. It's just the background-color of the body
#AndreaLigios
This is what I mean:
SOURCE
Check it out at http://themelandia.ilijatovilo.ch
Resize the window until the content is larger, and then scroll down.
Hopefully you'll see what I mean then.
EDIT: final solution based on your site:
add
overflow: auto;
position: fixed;
to your div#wrapper rule.
EDIT:
New solution: http://jsfiddle.net/SxPyW/2/
added top: 0; , padding-top: 100px; and z-index: 1;
Do you mean this ?
Demo: http://jsfiddle.net/SxPyW/
With absolute positioning, but with image scrolling up when scrolling the page (not the fixed behavior) ?
#main {
/* ... your stuff... */
border: 2px solid blue;
position: absolute;
top: 100px;
bottom: 0;
left: 0;
}
(borders inserted to show boundaries, they overlap each other here, if you need borders adjust the top attribute accordingly)
using the body technique but on the div styling... add the following to your style...
#main {
background-repeat: repeat-x;
background-position: left bottom;
background-image: url(url);
background-attachment: fixed;
}
You first need to set the height of the parent element to 100% to make the child element be able to stretch up to 100%
Set the width and height of html, body and #wrapper to 100% like this:
html, body, #wrapper
{
height:100%;
width:100%;
}
Now apply background image in #wrapper(#wrapper is recommended rather than #main but if some part of the image being cut from the top bothers you then use #main)
Here is a sample in jsfiddle.
Updated (r5)
I use another div to contains the background, set its position to fixed and z-index to -1;
#bg-trick {
background: url(http://images1.fanpop.com/images/image_uploads/Naruto-Uzumaki-uzumaki-naruto-964976_692_659.jpg) bottom center no-repeat;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
The demo is updated here http://jsbin.com/idubom/5/edit
Please check the updated [DEMO]1. This is what you are looking for.
DESCRIPTION:
div#wrapper{
height: 100%;
min-height: 100%;
width: 100%;
background-color: red;
background-repeat: repeat-x;
background-position: left bottom;
background-image: url(http://s1.ibtimes.com/sites/www.ibtimes.com/files/styles/article_large/public/2012/08/20/298141-apple-aapl-stock-price-becomes-most-valuable-in-history-but-there-s-st.jpg);
position:absolute;
bottom:0;
}
div#header {
height:80px;
background-color:green;
}
div#main {
padding: 60px 0px;
min-height: 200px;
bottom: 0;
}
div#contentWrap,div#headerWrap {
width:960px;
margin:0 auto;
text-align:center;
}
** The key point is to add position absolute/Fixed on wrapper.
To display a image in full width you need to say body as a 100% of height. Rest seems fine to me in your code.
Here is also updated DEMO May Be this is what you are looking for.
you've already given height 100% to your div, additionaly add an innerHTML to your div because empty divs create such issues.
document.getElementById('my_empty_div').innerHTML = ' ';
Hope that helps.