:)
I have a responsive header.
Here's the code for the hero section:
.hero {
background: url(../../img/hero.jpg);
background-size: cover;
background-position: center center;
position: relative;
height: 100vh;
margin: 0;
#include breakpoint($x-large) {
padding-left: 5%;
padding-right: 5%;
}
It's all great and responsive; however, when I open the console on web or keyboard on android the vh doesn't change and the button and text elements stay shifted down.
I've tried adding padding and specific media queries and other solutions, but I cannot find a universal effective solution...
Why is this happening and how can I resolve this?
You need to attach .container-hero to the bottom of the .hero.
.container-hero {
position: absolute;
bottom: 5%;
}
You'll also need to fix your layout due to position: absolute;.
But you get the idea :)
<style>
div {
width: 100%;
height: 400px;
background-image: url('http://i.stack.imgur.com/gwAUR.jpg');
background-size: 100% 100%;
border: 1px solid red;
}
</style>
</head>
<body>
<p>Resize the browser window to see the effect.</p>
<div></div>
</body>
Related
So I am coding a full width header tumblr theme and while everything's fine as far as the full width, as soon as I resize to a smaller screen, like on a mobile device or tablet, the header cuts off and it's no longer in full width. Example is
I literally tried everything, including resetting the css and I even went through every question on this site that deals with the same issue. I tried those solutions and neither worked so I really don't know what else to do or maybe it's possible there's literally nothing I can do about it as nothing has worked thus far. Here is the full code in case the issue is more than just the header.
.header {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: #eee;
background-image: url('{image:header}');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
{block:PermalinkPage}
display: none;
{/block:PermalinkPage}
}
.topbar {
width: 100%;
height: 80px;
z-index: 220;
background-color: {color:posts};
border-bottom: 1px solid {color:post borders};
border-top: 1px solid {color:post borders};
{block:PermalinkPage}
position: fixed;
top: 0;
{/block:PermalinkPage}
}
`<header class="header"></header>`
Thank you so much
Screen size changes accordingly for every device. Thats why most developers use Bootstrap to avoid such issues.
But for your answer, try this in CSS :
background-image(your url);
background-size cover;
I try currently to make a navbar with images, the navbar should be in middle centered with the image repeated on both sides. However the picture is only repeating on the right side. Anyone got a solution?
#leftHalf {
background: url(images/bg-1.jpg);
width: 50%;
position: absolute;
left: 0px;
height: 100%;
}
#rightHalf {
background: url(images/bg-2.jpg);
width: 50%;
position: absolute;
right: 0px;
height: 100%;
}
i also found this but it is (above) only for the background, do i have to seperate the navbar in 2 container?
JSFIDDLE
Thats what i got so far.
Any help is appreciated.
you need set ul to text-align:center;
find updated fiddle
.navbar2 ul{
text-align: center;
}
Thank you locateganesh it worked, for some reason i got now some placeholders between the buttons seen on your updated jsfiddle. How did this happen? i didnt changed anything only the text algin center.
edit:
i got it to delete the spaces between the images.
.yourclass {
font-size: 0;
}
In css3, you can use multiple images for background-images.
All the background-? rules can be used with the same construct.
<html>
<head>
<title>Image Demo</title>
<style>
body{
text-align: center;
}
#nav{
background-image: url("images/battery1.jpg"), url("images/battery2.jpg");
background-repeat: no-repeat, no-repeat;
background-position: left top, right top;
width: 100%;
height: 200px;
}
</style>
</head>
<body>
<div id="nav">some text</div>
</body>
</html>
Try it, but you'll need your own battery pics.
I have element with:
background-image url('../images/belly.png')
background-position 50% 50%
background-repeat no-repeat
background-attachment fixed
background-size cover
And underlying element with position: fixed;
And if I scroll page background is not redrawing. Problem appear in Chrome. Any solution?
demo: http://silentimp.github.io/90daysofbelly/
video: https://www.youtube.com/watch?v=av6jZciNszo&feature=youtu.be
I have noticed the best way to make sure the page backgound stays fixed no matter what is: place it as the background image of an empty first child of body, with these CSS rules:
.background-holder {
position: fixed;
width: 100%;
height: 100%;
display: block;
z-index: -10;
background-image: url(//link-to-image);
background-size: cover;
}
And here's the page structure:
<html>
<head>
</head>
<body>
<div class="background-holder"></div>
<div class="main-container">
<!-- content goes here -->
</div>
</body>
</html>
I had the same issue you had and struggled with it for almost 3 days. But as of June 2020 and improving on #tao's answer, here is a reliable solution I found for this that works on all devices and has 100% browser compatibility. It allows the desired effect in any place of the page and not just the top or bottom of the page, and you can create as many as you need or want.
The only known issue is with safari. The browser repaints the whole image every scroll movement so it puts a heavy burden on graphics and most of the time makes the image flicker up and down some 10px. There is literally no fix for this, but I think there is also no better response for your inquire.
I hope this works for you. You can check the results live in www.theargw.com, where I have three different fixed background images.
body, .black {
width: 100%;
height: 200px;
background: black;
}
.e-with-fixed-bg {
width: 100%;
height: 300px;
/* Important */
position: relative;
}
.bg-wrap {
clip: rect(0, auto, auto, 0);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.bg {
position: fixed;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center center;
background-image: url(https://images.pexels.com/photos/949587/pexels-photo-949587.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500);
transform: translateZ(0);
will-change: transform;
}
.e-container {
z-index: 1;
color: white;
background: transparent;
}
<div class="black"></div>
<div class="e-with-fixed-bg">
<div class="bg-wrap">
<div class="bg"></div>
</div>
<div class="e-container">
<h1>This works well enought</h1>
</div>
</div>
<div class="black"></div>
--------------------- EDIT ---------------------
The code posted was missing the background wrapper that allows the background to not change size and maintain the fixed position. Sorry to post the wrong code this morning guys! But here is the change.
Have a look at this page: rozbub
As you see, there is a fix header on the top and a scrollable content below. The content inside the black div scrolls well, but the image is fixed. How can I let this image scroll too?
Basically, I defined the main wrappers as following:
body{
width: 100%;
height: 100%;
overflow: hidden;
margin: 0px;
}
#generalWrapper{
height: 100%;
}
#header{
height: 70px;
width: 100%;
background: #080808;
}
#content{
overflow: auto;
position: absolute;
width: 100%;
top: 70px;
bottom: 0;
background: url("../images/background.jpg");
background-repeat: repeat-y;
}
with a structure like
<body>
<generalWrapper>
<header>
</header>
<content>
</content>
</generalWrapper>
</body>
Then, the content div is filled with elements (which make this div taller than the screen and results in scrollability). But why is the background image not affected?
It looks like you are scrolling divs inside your content div, but the content div itself is not scrolled.
Try to look through the list of errors found on your site by W3C's Markup validator.
I tried a different approach. First of all, I put the background image on the html, with following attributes
html{
background: url("../background.jpg") center center #000;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Then, I changed the header and content to
#header{
height: 70px;
width: 100%;
background: #080808;
position: fixed;
z-index: 55;
box-shadow: 5px 5px 5px 5px #080808;
}
#content{
position: absolute;
width: 100%;
top: 70px;
bottom: 0;
}
which results in exactly that behaviour I desired (Although the problem considered by Jules Mazur in the comment is not solved, I will try to solve this by providing different images for different resolutions).
Try setting the background-attacment to scroll. MDN has documentation for this property.
I want to fill my page with a background image and have the text aligned in place with that background. With the below code, the background image loads at the top of the page, and the text goes under it. I know I can use the "background: " function, but the way it is done in my below code allows for automatic resizing, regardless of browser size (i.e., mobile devices have small browser sizes). So, I just want the background image to go behind the text.
<html>
<head>
<title>Title</title>
<style>
img.bg
{
min-height: 100%;
min-width; 781;
width: 100%;
height: auto;
top: 0;
left: 0;
z-index: -1;
}
#media screen and (max-width: 781)
{
img.bg
{
left: 50%;
margin-left: -390.5;
}
}
#container
{
position: relative;
width: 781;
margin: 50 px auto;
height: 758;
border: 1px solid black
}
#left
{
position: relative;
left: 1.280409731113956%;
top: 14.51187335092348%;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
width: 50%;
height: 50%;
color: #FFFFFF;
position: relative;
}
p
{
font: 14px Georgia;
}
</style>
</head>
HTML
<img class="bg" src="background.jpg">
<div id="container">
<div id="left">
<p>
Text
</p>
</div>
</div>
</body>
</html>
Make your BG image have a z-index of 1, and your #container div to have a z-index of 2. Does that work?
img {
position: relative;
z-index: 1;
}
#container {
position: relative;
z-index: 2;
top: 0px;
left: 0px; /*or whatever top/left values you need*/
}
Just use position: fixed for your background image http://dabblet.com/gist/3136606
img.bg {
min-height: 100%;
min-width: 781px;
width: 100%;
top: 0;
left: 0;
position: fixed;
z-index: -1;
}
EDIT (I wish there was a way to make it more visible than this)
OK, after reading the comments for the original question, I understand that the purpose is to have a background that scales nicely for any display sizes.
Unfortunately, quite a lot of mobile devices have a problem with position: fixed - you can read more about this here.
So the best solution in this case is to use a background image, not an img tag, having the background-size set to 100% (which will stretch the image - example), or to cover (which will scale the image such that it completely covers the screen - example)
Well, maybe you can also try that css:
body{
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
it's should cover all youre page even when page size is changed