I've been going over some solutions here but nothing seems to fit.
my screen is using a 1920x1080 resolution and i'm creating a single page website.
I need the background photo to fill 100% of the page, BUT i also need it all the be shown. This is a photo containing a table at its bottom:
background-size: contain;
will make it shrink to a thumbnail
background-size: cover;
will make it cover the entire page and i will not see the table at the bottom.
Right now there is no actual code to show so I can't post anything here.
The actual image size is 2048x1479 so the image does not seems to be the problem
Many thanks in advance
Try setting the background-size to '100% 100%'.
The get it to fill the whole page you would need the following CSS
background-size: 100% 100%;
Although it may make the image appear distorted if the ratio isn't correct
html {
height: 100%;
width: 100%;
}
body
{
background-color: white;
background-image: url('../img/background.jpg');
background-size: 100% 100%;
background-repeat: no-repeat;
margin: 0 auto;
}
so, i've played with it some more (i've been playing with it "some more" for half an hour now) and solution has finally arrived. if someone needs the solution...^
the best solution is as follow :
.yourMainContainerClass {
visibility: visible;
z-index: 1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom:0;
background: url(imagebc.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
try this out ,
Live Demo
Related
I am currently trying to use a subreddit theme and resize an image to be bigger/actual size of uploaded image.
Current code for the Logo is:
/* SUBEDDIT LOGO ADDON
----------------------*/
#header .pagename a {
width: 100px;
background: url(%%subredditlogo%%) left center/auto 50px
}
I am trying to scale image to be bigger with keeping aspect ratio.
Like I said this is on Reddit, so I can only interact with the subreddit stylesheet.
I have edited it some and played with it, I have gotten improvements, but not the full image to show.
Here is my current code:
/* SUBEDDIT LOGO ADDON
----------------------*/
#header .pagename a {
width: 300px;
background: url(%%subredditlogo%%) left center/auto 300px;
background-size:100% 200%;
background-repeat:no-repeat;
}
It has resized the width but I cant get the height to change. I have tired the:
left center/auto 300px;
but nothing, and also the
height: 100%;
height: auto;
Just looking to get it fixed now.
Try this:
background-image: url(%%subredditlogo%%);
background-position: left center;
background-size:cover;
background-repeat:no-repeat;
I believe you need to break out your "background" css into individual attributes in order for each attribute to work properly.
You could try this:
background: url(logopath) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
#header .pagename a img{
width:100%;
height:auto;
}
Try this for auto resize img.
I have been researching for a while to how to get my background image to work on different screen resolutions. After many failed attempts I noticed I can't even get a normal css background in. It's not the file, I have tried different formats.
Code for the different screen resolutions:
html {
background: url('background.jpg') no-repeat center center fixed;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}
The code the normal background:
body {
background-image: url('Background.jpg');
}
That is strange. Did you check that the path to your image is correct? For example if the image is inside an "example" folder, the path should be "example/myImage.png".
As for a responsive background, I believe you are on the right track, although a simple background-size: 100%; would have been enough. Check this Jsfiddle https://jsfiddle.net/a0mvnj63/
Also try using an external image, like in my example, just in case.
Try to use your code like this background-image:url('../background.jpg'); with height: 100vh;
body {
padding: 0;
margin: 0;
height: 100vh;
background-image: url(http://static.tumblr.com/295a1562899724d920b2b65ba33ffb76/vouqyzj/f2Dna5qb8/tumblr_static_197ahk99f1z44ogskg4gw4c80.jpg);
background-size: 100% 100%;
background-position: center;
}
h1 {
text-align: center;
color: #fff;
}
<body>
<h1>Hello Universe</h1>
</body>
only background elements does not give height and width to any div or html.
try giving some height and width to your code. just like
html { background: url('background.jpg') no-repeat center center fixed; height:500px; width:500px; }
or just put some data on body so you get auto height width according to contain and get image in background.
Ok so what I mean is, I want my background image to stay and the content in the div to scroll as more content inside is added.
see I don't want this to scroll
http://codepen.io/anon/pen/gLCns/
see kind of like the content on the codepen where you scroll in each window but it doesn't flow all over just in that window
you can use background-attachment: fixed; property to fix the background image.
html {
width: 100%;
height: 100%;
background: url(http://lorempixel.com/400/400) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.content{
position: absolute;
background-color: rgba(255,255,255,0.7);
width:50%;
height:1020px;
left:20px;
top:20px;
}
Here is a Demo.
The background-attachment property is what controls if the background image scrolls or stays.
http://www.w3schools.com/cssref/pr_background-attachment.asp
So in the CodePen it has background-attachment:fixed; and the image stays put while the content above it scrolls.
Then you simply center the content container on the page, leaving off overflows, and as the content grows the page will scroll but the background is fixed.
OK, first your code is a mess. I recommend running your code through the w3 validator first.
You have two options to do what you want, either using the background fixed & cover that you already have answers for:
html {
width: 100%;
height: 100%;
background: url(image_URL) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
or using overflow on the div with the content.
#content {
width: 600px;
height: 500px;
overflow-y: scroll;
}
I want to stretch image when content of html is increase. And whenever content is increases then automatically background image stretch without repeating in css. In Html pages.
Check this out!
Here is my CSS:
div {
background-image: url(http://placekitten.com/200/300);
background-repeat: no-repeat;
min-width: 200px;
min-height: 300px;
background-size: 100% 100%;
}
background-size: cover; will also work, with a slightly different effect.
Here is my suggestion to avoid stretching:
div {
background-image: url(http://placekitten.com/200/300);
background-repeat: no-repeat;
height: auto;
width: 100%;
background-position: 50% 0;
background-size: 100%;
}
http://jsfiddle.net/Riskbreaker/mx8rr/1/
We can stretch background image when add large content without repeating image in css
please try next:
background-size: cover;
or
background-size: contain;
Trying to get full size background image with:
html {
height: 100%;
background:url('../img/bg.jpg') no-repeat center center fixed;
background-size: cover;
}
It's showing the background image with correct width but height gets stretched.
I tried various options like
html {
background:url('../img/bg.jpg') no-repeat center center fixed;
background-size: 100% auto;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
}
removing height: 100%
but none of them worked.
Your screen is obviously a different shape to your image. This is not uncommon, and you should always cater to this case even if your screen is the same shape (aspect ratio), because other people's screens will not always be. To deal with this, you have only one of three options:
You can choose to completely cover the screen with your image, but not distort the image. In this case, you will need to cope with the fact that edges of your image will be cut off. For this case, use: background-size: cover
You can choose to make sure the entire image is visible, and not distorted. In this case, you'll need to cop with the fact that some of the background will not be covered by your image. The best way to deal with this is to give the page a solid background, and design your image to fade into the solid (although this is not always possible). For this case, use: background-size: contain
You can choose to cover the entire screen with your background, and distort it to fit. For this case, use: background-size: 100% 100%
try with contain instead of cover and then center it:
background-size: contain;
background-position: center;
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;
A better solution might be to use a lightweight jQuery plugin to dynamically size the background to the browser site. One I really like is backstretch.js. They're incredibly simple to implement.
I have same problem I use this CSS on body
background: url(image.jpg);
background-color: rgba(0, 0, 0, 0);
background-position-x: 0%;
background-position-y: 0%;
background-size: auto auto;
background-color: #0a769d;
height: 100%;
min-height: 100%;
max-height: 100%;
width: 100%;
background-size: 100% 100%;
background-position: center;
max-width: 100%;
min-width: 100%;
top: 0;
left: 0;
padding: 0;
margin: 0;
You should use the body as the selector and not html, this will cause issues with your markup. Your code is below:
html {
height: 100%;
background:url('../img/bg.jpg') no-repeat center center fixed;
background-size: cover;
}
I would try something like:
body {
background:url('../img/bg.jpg') no-repeat 50% 0 fixed;
margin: 0 auto;
}
You should not have to specify the dimensions for the image.