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
Related
I am trying to make an image responsive, but when I test it with different screen sizes, it cuts off part of the image.My CSS is pretty straight forward as below. Here is my codepen
.mainImage {
position: relative;
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
background-attachment: fixed;
width: 100%;
min-width: 100%;
margin-right: 0;
margin-left: 0;
height: 600px;
margin-top: -85px;
background:url(https://s-media-cache-ak0.pinimg.com/originals/12/5d/ba/125dba934726c247106978c7b9cdb452.jpg)
}
What am I missing or could be doing wrong?
You're setting all the "background-" parts first, and then defining "background" in a shorthand, which is overwriting. Change the order...
.mainImage {
position: relative;
background:url(https://s-media-cache-ak0.pinimg.com/originals/12/5d/ba/125dba934726c247106978c7b9cdb452.jpg)
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
background-attachment: fixed;
width: 100%;
min-width: 100%;
margin-right: 0;
margin-left: 0;
height: 600px;
margin-top: -85px;
}
Or don't use the shorthand...
background-image: url(https://s-media-cache-ak0.pinimg.com/originals/12/5d/ba/125dba934726c247106978c7b9cdb452.jpg)
You could also use background-size: contain instead of cover to force the image to display fully.
cover will completely fill the whole background.
contain will make sure the whole image is displayed inside the element
You also need to apply these background styling properties after the main background style.
So:
.mainImage {
position: relative;
width: 100%;
min-width: 100%;
margin-right: 0;
margin-left: 0;
height: 600px;
margin-top: -85px;
background:url(https://s-media-cache-ak0.pinimg.com/originals/12/5d/ba/125dba934726c247106978c7b9cdb452.jpg);
background-repeat: no-repeat;
background-size: contain;
background-position: top center;
background-attachment: fixed;
}
try adding this:
background-size: 100% 100%;
I am trying to find a way to put a nav bar behind some background images that repeat. Here it is:
Basically, I want to have a navigation bar behind the repeating plants image, but in front of the sun image. I am going to make the nav elements popup when they are hovered over. Here is my css for the header:
header {
height: 250px;
width: 100%;
background-image: url("top.png"), url("banner.png");
background-repeat: repeat-x, no-repeat;
background-size: auto 40px, cover;
background-position: bottom;
}
I would recommend z-index. From W3Schools:
"The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order."
The larger the z-index of an element, the closer to the front the element is.
Part of the solution was to use z-index as Howzieky mentioned but did not provide an example for. Here is how I did it:
css:
header {
height: 250px;
width: 100%;
position: relative;
}
#background-far {
height: 250px;
width: 100%;
background-image: url("banner.png");
background-repeat: no-repeat;
background-size: cover;
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
#header-body {
height: 250px;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
#background-close {
height: 250px;
width: 100%;
background-image: url("top.png");
background-repeat: repeat-x;
background-size: auto 40px;
background-position: bottom;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
html:
<header>
<div id="background-far"></div>
<div id="header-body">
<img src="logo.png"/>
</div>
<div id="background-close"></div>
</header>
I also needed split the header into 3 sections (background-far, header-body and background-close). Header body will store everything I will have in the header such as my nav bar. The important part was to make the header use position: relative and each section to use position: absolute; top: 0; left: 0;
Thanks for all your help everyone!
I tried so much! But I think my problem is a little more special than the other solved questions:
Here is the side:
fruehstarter.com
I have a problem with the background on mobile devices.
My client wanted a special background, it's fixed with 100% width and height. On a mobile device you need to zoom in to identify the content.
But if you scroll down and the browser line disappears, the background-image jumps because of the new height.
Either I have the jumping background or I have a white border at the end of the side with the height of the browser line.
Hope you understand my problem and can help me. Thanks a lot!
EDIT: What I've tried:
background:cover not scaling on mobile browsers
Background image jumps when address bar hides iOS/Android/Mobile Chrome
And I've tried to give my div ".bg" and ".container-fluid" another positions (changed to "absolute" and "relative") or give another div the background.
EDIT 2nd:
Here is the CODE: jsfiddl
HTML:
<div class="container-fluid">
<div class="bg"></div>
<div class="row">
<div class="linkbox"></div>
</div>
</div>
CSS:
html {
font-size: 10vh;
height: 100%;
font-family: 'Titillium Web', sans-serif;
}
body {
-webkit-overflow-scrolling: touch;
min-height: 100%;
width: 100%;
position: relative;
}
.container-fluid {
height: 100%;
overflow-x: hidden;
position: absolute;
width: 100%;
}
.row {
height: 100%;
position: relative;
}
.bg {
overflow: hidden;
position: fixed;
width: 100%;
height: auto;
min-height: 10rem;
padding-left: 15px;
padding-right: 15px;
margin-left: -15px;
margin-right: -15px;
z-index: -1;
background: url('http://fruehstarter.com/wp- content/themes/fruehstarter/library/images/fs_klingelschildMobil6.jpg') no-repeat;
background-size: cover;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-position: center center;
background-attachment: fixed;
}
JAVASCRIPT:
jQuery(document).ready(function () {
if (navigator.userAgent.match(/(iPad|iPhone|iPod|Android)/g)) {
$('html').css('font-size', Math.ceil($(window).height() / 10));
$('.bg').css('overflow-y', 'scroll');
$('body').scrollTop(1);
}
}
It would be helpful to share your code.
I think
background-attachment: fixed;
in addition is what your are looking for.
Example:
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
Update
Try this:
body {
background: url('http://fruehstarter.com/wp- content/themes/fruehstarter/library/images/fs_klingelschildMobil6.jpg') no-repeat;
background-size: cover;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
I think defining background inside the body, in your case, is more comfortable.
I'm trying to put in the right place a button which is a sibling with a div which have a cover background image. Every time when I stretch the cover div (to be "responsive" in some way), I want the button to be in the right place about this cover image. I mean that the cover div image has some graphics (feathers) and I want the button to be between them every time. How can I do that? Thanks in advance.
My HTML
<div class="cover_bgr"></div>
<div class="main">
Click
</div>
My CSS
.cover_bgr {
background: url(http://www.hdwallpapers.in/walls/colorful_background-wide.jpg) center no-repeat;
min-width: 100%;
background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
position: fixed;
top: 0;
left: 0;
min-height: 100%;
height: 100%;
}
.main {
position: relative;
margin: 0 auto;
z-index: 100;
height: 500px;
width: 100%;
}
.btn {
position: relative;
top: 30%;
left: 70%;
padding: 15x 5px;
background-color: #2a2a2a;
display: inline-block;
color: #fff;
}
My JSFiddle:
http://jsfiddle.net/onlinepch/w7v6L578/
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.