I have an image background on my website:
body {
background-image:url('tlo.jpg');
background-color:#000000;
background-repeat:no-repeat;
background-attachment:fixed;
background-position: center center;
background-size: auto auto;
(...)
}
There are not any problems on PC, but mobile devices with vertical screen renders background not exactly in the same way: it seems that mobile browsers fit the background horizontally, so vertically it covers only small piece of website. I've tried to fix it by using different values for background-size attribute, but it didn't work.
My CSS + HTML:
body {
background-image:url('tlo.jpg');
background-color:#000000;
background-repeat:no-repeat;
background-attachment:fixed;
background-position: center center;
background-size: auto auto;
margin-left: 0;
margin-right: 0;
}
#overall {
margin-left: 0;
margin-right: 0;
width: 100%;
height: 100%;
}
#logo {
position:absolute;
left:0;
top:0;
}
#content {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
width: 100%;
height: 300px;
background-color:rgba(255,255,255,0.5);
text-align: center;
}
and
<body>
<div id="overall">
<div id="logo"><img src="logo.png" width="654" height="150"></div>
<div id="content"><img src="cont.png" border="0"></div>
</div>
</body>
This is the solution that I came up with. It works perfect on both landscape and portrait screens.
background: url(bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
I would suggest you to load two different images. One for desktops and another for mobile devices. You can use the less sized image for the mobile devices which can in turn reduce your loading time for mobile devices. You can use the CSS Media Queries to do so. Here is a tutorial for the CSS Media Queries.
CSS Media Queries & Using Available Space
Related
How can I have an image always covering all the screen regardless of monitor sizes? I have an image which has a height of 1000px and a width of 1000px. I don't want the image to be repeated but I don't want the scrolling bar to appear as well. If I use % the image is repeated, because it's inside a div. Thank you
I want the bottom of the image to be always at the bottom of the browser page and the div/image to be always the same size, even if I zoom with the browser
div {
width: 1000px;
left:0%;
right:0%;
top: 0%;
height: 800px;
text-align:center;
position: absolute;
background-image: url("image.png");
background-position: 50% 50%;
margin:auto; }
Try this out
div {
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;}
If you still want to know more, do check out this link
https://www.w3schools.com/howto/howto_css_full_page.asp
well if you want set up a full image background that is also responsive, you can do the following:
div {
width: 100%; height: 100%; top: 0; left: 0;
background: url(images/bg.jpg) no-repeat center top; position: fixed; z-index: -1;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
If you want to add this image as background image you can add the below css
div {
width: 100%;
height: 100%;
background: url(images/bg.jpg) no-repeat center top;
position: fixed;
z-index: 0;
}
Or if you want image to be show you can do the below things
<img src="images/bg.jpg" style="width: 100%;height :100%">
if (screen.width>=500){document.write(" body{zoom:78%;}");}
Here's the solution for my code, I needed to change the zoom.
Right now my background image adapts to the screen size. The problem is, when the screen shrinks too much (e.g. mobile) the background image is no longer long enough to fill the div vertically.
So what I did was to assign a value to width instead of using 100%:
#content {
width: 2000px;
}
The problem is, the div is no longer responsive, since it has a fixed width.
How to solve this dilemma?
Here's the relevant code:
HTML:
<div id="content">
<div class="container clearfix">
</div>
</div>
CSS:
.container {
position: relative;
margin: 0 auto;
width: 960px;
}
#content {
background: url(images/bg.jpg) repeat 0 0;
background-repeat: no-repeat;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
background-attachment: scroll;
background-position: 50% 0;
position: relative;
width: 100%;
height: 750px;
}
#content .container {
height: 750px;
}
And the live site: http://www.m2comm-semi.com/
These two rules
background-size: cover;
background-position: center; /* bottom, top, etc */
should make your background image work properly on every resolution as long as it is big enough to cover f.e. 1900x1200, just give it a shot and let me know if the result is satisfying, bro.
I'm trying to figure out the best method for making a background image fully responsive - so far the best way I can figure out is to use background-size: cover, as most people tend to suggest, but with background-attachment: fixed so that the image scales down it's proportions as the screen resizes, otherwise it just retains it's original proportions and doesn't scale at all. Using just background-size: cover stretches the image to fill the container div, but won't automatically scale proportions..
However I don't want the effect of fixed background that hides part of the image as you scroll down and would prefer it to be background-attachment: scroll, but I can't get that to work and make it scale as well.
So my question is: is there any way I'm not aware of to have the background images scale automatically with screen size without having to use background-attachment: fixed to achieve it?
Please see my JSFiddle for what I've got at the moment: https://jsfiddle.net/uhoL5d5w/2/
(and yes I'm also aware I will be needing to use media-queries at some point to serve optimized images to the various screen sizes)
My current code looks like:
<header>
<div class="launch-bg">
<nav class="menu">
</nav>
</div>
</header>
<div class="page-wrapper">
</div>
<div class="push"></div>
<!-- Footer -->
<div class="footer"></div>
html,
body {
#include box-sizing(border-box);
height: 100%;
}
div,
body {
margin: 0;
padding: 0;
}
body {
display: block;
background-color: #000000;
}
.page-wrapper {
margin: 0 auto -900;
min-height: 100%;
height: auto;
}
* {
margin: 0;
padding: 0;
}
header {
display: block;
width: 100%;
height: 1200px;
}
.launch-bg {
height: 1200px;
background-image: url('http://s8.postimg.org/56xlj2rc5/launch_bg.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
background-size: cover;
}
.footer {
height: 900px;
padding: 6% 0;
color: $white;
background-image: url('http://s8.postimg.org/onib5lmg5/footer_bg.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
background-size: cover;
}
Here's a simple example, I think, of what you're asking for, just trimmed it all down for clarity:
header {
display: block;
width: 100%;
height: 1200px;
background-image: url('http://s8.postimg.org/56xlj2rc5/launch_bg.jpg');
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center center;
background-size: cover;
}
I've tried changing the pixels to percentages and nothing seems to work. If I make it in 1920x1080 and then switch to a lower resolution the website looks all cluttered and weird.
Here's the CSS code:
body
{
margin: 0px;
padding: 0px;
background: url("images/Background.png")
}
#header
{
position: absolute;
top: -160;
left: 420;
right: 0;
}
.headerImage1
{
margin: 0px;
padding: 0px;
position: absolute;
width:100%;
height:100%;
background-repeat:no-repeat;
}
Here is what it looks like on a different resolution: (The correct way would be centered)
http://puu.sh/6RgHg.jpg
EDIT: HTML part:
<body>
<div id="header">
<div class="headerImage1">
<img src="images/Header.png">
</div>
I think it's cause your ratio gets off when you use:
width:100%;
height:100%;
Try this instead:
width: 100%;
height: auto;
That way the ration doesn't mess up, if you want the background to not mess up, try this:
background: url("images/Background.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
EDIT:
If you mean centering the image, absolute poitioning is the absolute size of the browser, the full screen. While relative is the current position of the brower.
I would use relative for cross-device purposes.
I'm trying to do a background image of 100% and have an image as the background. When I upload the image it goes to 100% but it cuts off have the picture. It makes the image wider than my screen. How do I fix it where the picture width is 100% but the image width fits the screen without getting cut off. Here is my tumblr to let you see what I mean (http://ophelialogy.tumblr.com/) and here is the full image to show you the full image and give you an idea for where it's cutting off (http://imageshack.us/a/img7/7103/khb3.png).
Here is my code:
CSS PART
/* --- HEADER --- */
#header {
top: 0;
left: 0;
width: 100%;
{block:IfAdjustableHeader}height:{text:Header Height};{/block:IfAdjustableHeader}
{block:IfNotAdjustableHeader}height:100%;{/block:IfNotAdjustableHeader}
position: fixed;
z-index: 10;
background-image: url('{image:header}');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* --- PAGE CONTENT --- */
#page {
{block:IfAdjustableHeader}top:{text:Header Height};{/block:IfAdjustableHeader}
{block:IfNotAdjustableHeader}top:100%;{/block:IfNotAdjustableHeader}
left: 0;
width: 100%;
min-height: 100%;
position: absolute;
background: {color:Background};
z-index: 99;
}
.container {
margin: 50px auto 0px;
{block:If400Posts}width: 800px;{/block:If400Posts}
{block:If500Posts}width: 900px;{/block:If500Posts}
}
/* --- POSTS --- */
.postcol {
width: 540px;
margin-left: 240px;
}
.posts {
margin-bottom: 20px;
background-color: #fff;
padding: 20px;
}
.posts img, .posts li, .posts blockquote {
max-width: 100%;
}
HTML Part
<body>
<div id="header">
<div class="description">{Description}</div>
</div>
<div id="page">
<div class="container">
<div class="postcol">
{block:Posts}
<div class="posts">
</div>
this excellent blog post explains exactly what you need, without any third party tools:
http://css-tricks.com/perfect-full-page-background-image
also, there are some jQuery plugins for that, including:
https://github.com/jaysalvat/vegas
https://github.com/buildinternet/supersized
SO...
What cover does (in my mind) is take the background image and do it's best to use the most of it that it can depending on the height or width of the box it is in. There are 2 ways to deal with this. One way is to make the box the perfect ratio for the image. The other is to actually use an img that will stretch the box to it's exact size. Here is how to do each. The plus of the background-image version, is that you can easily only serve a small version to small screens with an #media rule.
HTML
<header class="container global-header"></header>
<header class="container global-header2">
<img alt="banner-thing" src="http://placekitten.com/400/100" />
</header>
CSS
html, body {
height: 100%;
margin: 0;
}
.container {
width: 100%;
float: left;
}
.global-header {
width: 100%;
/* this is hacky - but it is your answer */
height: 0;
padding-bottom: 25%;
background-image: url("http://placekitten.com/400/100");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
/* you should have this too */
background-position: center center;
}
.global-header2 {
width: 100%;
/* height will be determined by image size */
}
.global-header2 img {
display: block;
width: 100%;
height: auto;
}
FIDDLE
use:
background-image: url(../images/myimage.jpg);
background-size: cover;
Do you want the background image in the header or on the main page?
It is currently in the header.
Set the background image on the html tag if you want it to cover the whole page.
Nasser's link to do that is a good one (I would leave out the browser specific hacks though).
EDIT
AHH You're talking about width.
I think it might be something to do with the irritating slider tumblr have coming in from the right - it is about that much too stretched.
I suggest trying these styles on jsfiddler - or another separate site - you'll probably find it works fine.