I wanted to do flowing content over fixed background. It works perfectly on desktop. On iOS also works but not perfect. Main problem is on android phones. It isn't covering content. If you want edit it, here is CodePen link.
body{
height:200vh;
}
#one{
height:300px;
width:100%;
background:url('https://www.w3schools.com/w3css/img_fjords.jpg') center center no-repeat fixed/cover;
}
#two{
padding-top:30px;
background-color:grey;
height:400px;
padding-left:10px;
}
.column{
width:calc((100% / 3) - 10px);
height:200px;
float:left;
margin-right:10px;
background:url('https://www.w3schools.com/w3css/img_fjords.jpg') center center no-repeat fixed/cover;
}
<body>
<section id="one"></section>
<section id="two">
<div class="column column_one"></div>
<div class="column column_two"></div>
<div class="column column_three"></div>
</section>
</body>
You can place your fixed background image into a separate dedicated div, as opposed to the browser background itself.
Set your div to 100% of viewport height and width, give it a fixed position and a z-index of -10, then place all your background image styling in that div instead, leaving the browser background blank.
Dont know other workarounds. android is buggy...
Related
I have a background image problem with medium screen and lower...
i tried background cover property but it adds horizontally white space bottom of image
how i fix that...?
the html is here
html
<body class="bg">
<div class="container">
<div class="box"></div>
</div>
<body>
CSS
.bg{
background-image:url(http://themes.siiimple.com/360/wp-content/uploads/2012/07/FreeGreatPicture.com-18429-hd-color-background-wallpaper.jpg);
background-repeat:no-repeat;
background-size: cover ;
}
.box{
height:400px;
width:88%;
background:#C5C0C1;
opacity:.5;
margin-top:50px;
}
http://jsfiddle.net/azhrhussain/1xtvvfL8/
You're using the background-size property correctly, but your body element isn't reaching the bottom of the window. Just add this to your html:
html {
height: 100%;
min-height: 100%;
}
http://jsfiddle.net/1xtvvfL8/4/
To avoid whitespace, add:
html,body {
margin:0;
padding:0;
}
It'll remove any automatically-applied margins or padding by the browser to your page.
I'm trying to make a site similar to this: http://www.awerest.com/demo/myway/light/
A single paged site with a responsive image that takes up the full screen, on any device. That's my issue I can't figure out a way to get a background image to go full screen on any device.
<img src="C:\Users\Jack\Desktop\City-Skyline.jpg" class="img-responsive" alt="Responsive image">
I came across this but no luck, if some one can point me into the right direction on how to do this it would be very appertained.
The crucial part here is to set up the height of your content as 100% relative to the viewport (html element). By applying the background image to a div and not just using an img you also have a lot more flexibility in how its displayed, background-position keeps it always centered, background-size:cover keeps it scaled.
Demo Fiddle
HTML
<div></div>
<div>More Content</div>
CSS
html, body {
height:100%;
width:100%;
position:relative;
margin:0;
padding:0;
}
div:first-of-type {
height:100%;
width:100%;
background-image:url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSbcnkIVXLz23PALu8JD-cTGe8KbXKC1JV0gBM_x1lx3JyaNqE7);
background-size:cover;
background-position:center center;
}
div:last-of-type {
background:green;
position:relative;
color:white;
height:100%;
}
First time asking a question :)
My header DIV has a background that is curved like a wave. I have a sidebar floated to the right located in a DIV underneath the header DIV. The background image for header curves up right where sidebar is which leaves a gap where sidebar hits the bottom of the header div (because obviously divs aren't curved). I need the background of sidebar to extend underneath header so there is no gap. What should I do?
HTML:
<div id="header"></div>
<div id="body>
<div id="main-content"></div>
<div id="side-bar></div>
</div>
CSS:
#header{
width:100%;
height:272px;
margin:0 auto;
background-image:url('../img/header.png');
background-repeat:no-repeat;
text-align:center;
}
#body{
width:960px;
height:auto;
margin:0 auto;
padding-bottom:159px;
}
#main-content{
width:60%;
height:auto;
margin:0 auto;
float:left;
padding:15px;
background-color:#fbf8ee;
}
#side-bar{
width:30%;
height:auto;
margin:0 auto;
float:right;
padding:10px;
background-color:#961912;
border-right:thick #558c21 solid;
border-left:thick #558c21 solid;
}
![Here is a screenshot of what it looks like currently. The sidebar has no content so it is narrow but I want it to extend up behind the header image so there is no gap.1
Not 100% sure on what you're wanting to achieve, but if you're wanting the sidebar to show behind the header and extend upwards, try adding to the sidebar style:
margin-top: -100px; /* Higher or lower number depending on how far up you want it to go */
position: relative;
z-index: -1;
Not really sure if I understand you correctly but try to add:
position: relative;
top: -10px;
to #side-bar as you can see here http://jsfiddle.net/NpZJV/
If I may advice, don't use % for width/height and positions use px instead.
You could use CSS3 to make a background size, check it out to see if it solves your problem.
http://www.w3schools.com/cssref/css3_pr_background-size.asp
Try using
background-size: 600px 2921px;
You might be able to get it to fit
Images will not center with vertical align for me, as it seems they should. I am coding for IE7 in quirks mode only (unfortunately). My code is below. Anyone know why this wouldn't vertically align
<html>
<head>
</head>
<body>
<div style="height:500px; width 500px; line-height:500px; background-color:Green; vertical-align:middle;">
<img src="./images/load.gif" style="vertical-align:middle;"/>
</div>
</body>
</html>
If you want to vertically align your image within the div you should do the following:
div {
position:relative;
height:500px;
width:500px;
}
div img {
position:absolute;
top:50%;
margin-top:-XXXpx; /* where XXX is half the height of the image */
}
You can make the image a background image instead and then center the background with something like the following:
<div style="height:500px; width 500px; line-height:500px; background: green url('/images/load.gif') left center no-repeat ; "></div>
I have a header image that repeats across screen, so that no matter the screen resolution the header is always stretched 100%, I have placed the image inside a wrapper div.
Over the top of that DIV I also wish to place the 'logo' such that it is always centred across the top of the screen.
I appreciate this could be done another way and have already tried just having the logo on top of the header in photoshop although i couldn't get the image centred as I would of wished.
Please find my code below:
HTML:
<div id="wrapperHeader">
<div id="header">
<img src="images/logo.png" width="1000" height="200" alt="logo" />
</div>
</div>
CSS:
#wrapperHeader{
position: relative;
background-image:url(images/header.png);
}
#header{
left: 50%;
margin-left: -500px;
background:url(images/logo.png) no-repeat;
width:1000px;
height:200px;
}
Also, I am aware of the properties of margin-left:auto; etc. Although I would be grateful if anyone could explain how to use them appropriately here.
Thanks!
I think this is what you need if I'm understanding you correctly:
<div id="wrapperHeader">
<div id="header">
<img src="images/logo.png" alt="logo" />
</div>
</div>
div#wrapperHeader {
width:100%;
height;200px; /* height of the background image? */
background:url(images/header.png) repeat-x 0 0;
text-align:center;
}
div#wrapperHeader div#header {
width:1000px;
height:200px;
margin:0 auto;
}
div#wrapperHeader div#header img {
width:; /* the width of the logo image */
height:; /* the height of the logo image */
margin:0 auto;
}
If you set the margin to be margin:0 auto the image will be centered.
This will give top + bottom a margin of 0, and left and right a margin of 'auto'. Since the div has a width (200px), the image will be 200px wide and the browser will auto set the left and right margin to half of what is left on the page, which will result in the image being centered.
you don't need to set the width of header in css, just put the background image as center using this code:
background: url("images/logo.png") no-repeat top center;
or you can just use img tag and put align="center" in the div