I am trying to do a fixed div with an image set as background-image. I set the background-size to 100% so it doesn't repeat or being too small for big screen resolutions or when zoomed out. The problem now is, that on mobile devices, the background image gets too small and moves out of the visible area.
How can I solve this problem? Is there a better solution then background-size:100%?
CSS:
.background {
position:fixed;
margin-top:65px;
height:400px;
background: url(../img/1111.jpg) no-repeat;
width:100%;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
background-size: 100% auto;
top:0px;
}
To answer your comment, yes you can set a min-width, max-width, or min-height, max-height in your CSS.
.background {
position:fixed;
margin-top:65px;
height:400px;
background: url(../img/1111.jpg) no-repeat;
width:100%;
min-width: 400px; /* change this to your choice */
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
background-size: 100% auto;
top:0px;
}
Related
What changes do I implement so that the backgound image Back.jpg show fulls screen and the content scrolls, rigth now it only works on desktops
The content should scroll with the image remain full screen
the image is 1500 width by 1000 height, in phones the image looks shrinked, but on desktops looks fine.
<style>
html, body {
margin:0;
padding:0;
border:0;
height:100%;
background: url(Back.jpg) center no-repeat fixed;
}
</style>
<style>
html, body {
margin:0;
padding:0;
border:0;
height:100%;
background: url(Back.jpg) no-repeat center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
background-size:cover; will work with a media query perhaps
I'm making a Wordpress Theme but I have a little problem with the footer. I want it to occupy the 100% of the window, but it only occupies 1200px. I don't know why it's shown like that. Here you have the CSS Code
#navigationposition {
float:left;
color:#fff;
width: 100%;
height:200px;
position:relative;
bottom:0;
left:0;
background-attachment: fixed;
background-origin: initial;
background-clip: initial;
background-repeat: no-repeat;
background-position: 100% 0;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-image: url("http://www.lasvegasicc.org/wp-content/uploads/2013/08/Las-Vegas-Wallpaper-HD.jpeg");
}
Here's the link to the website
Your div id=#container restraints the footer to not exceed 1200px. This is happening here :
#container {
max-width: 1200px;
background-color: transparent;
margin: 0 auto;
}
You can either take the content of your footer out of the container or remove max-width:1200px from container rule.
Hope this help.
This means that you are placing this div ( navigationposition ) inside another one which has a fixed width, and is limiting your DIV.
If you cannot access to the code that is framing yours, ( few websites don't let you change container ) then the only possible way I think is to make this DIV ( navigationposition ) absolute with bottom=0 ( the result wont be the same when you scroll)
If you can haveaccess to all code, then change the width of the div that contains the div ( navigationposition )
/*if you can change it*/
#container {
/*width:1200px;*/
width:100%;
}
/*Only if you cannot change its container*/
#navigationposition {
float:left;
color:#fff;
width: 100%;
height:200px;
position:absolute;
/*position:relative;*/
bottom:0;
left:0;
background-attachment: fixed;
background-origin: initial;
background-clip: initial;
background-repeat: no-repeat;
background-position: 100% 0;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-image: url("http://www.lasvegasicc.org/wp-content/uploads/2013/08/Las-Vegas-Wallpaper-HD.jpeg");
}
Your footer is inside a div#container with a 1200px width.
Move out your div#navigationposition from the div#container and it should be alright ;)
use position absolute and height:100vh. it seems done with this
I have a fiddle here.
CSS:
body, html{
background: url("http://i62.tinypic.com/25qdg86.png") no-repeat center center fixed;
background-repeat:no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:100% 100%;
}
#img {
width:70%;
display:inline-block;
background-color:red;
position:absolute;
bottom:12%;
height:70%;
margin-top:-80px;
margin-left:100px;
}
HTML:
<div id="img"> </div>
Is it possible to make the id tag called #img look like it's fixed to the background?
I am simply trying to make the red block fluid between the blue box (look at the fiddle).
So if you adjust the resolution of the page the red block will not go out of the blue box height-wise, but it will go out of the blue box width-wise.
So basically I want to make sure the red block (#img) stays within the blue box that is on the background image. How can I do this?
Percentages and pixels don't mix that well... Change it all to percentages, for example like this:
#img {
width: 74.1%;
display: inline-block;
background-color: red;
position: absolute;
height: 71.8%;
top: 17%;
left: 13.2%;
}
Fiddle: http://jsfiddle.net/Niffler/r3nW8/43/
Sure you can:
http://jsfiddle.net/r3nW8/44/
body, html {
background: url("http://i62.tinypic.com/25qdg86.png") no-repeat center center fixed;
background-repeat:no-repeat;
-webkit-background-size: 100% 100%; /* use 100% 100% everywhere */
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
}
#img {
background-color:red;
position:absolute;
margin: 0 auto;
top:18%; /* not 15% cause you have more space on the top area! :) */
left:0;
bottom:0;
right:0;
height:70%;
width:73%; /* note the blue border on your image is not positioned well... */
}
With some more % tweaks you can achieve perfect results: http://jsfiddle.net/r3nW8/45/
im using parallax effect together with background-size: cover;. There's no problem when the screen res is +1090px, but if it's smaller, background image starts to hide under the bottom div.
Here is my css code for the bg img.
#bg6 {
background: url(../../../images/para/6.jpg) center bottom no-repeat fixed;
height:400px;
width:100%;
position:relative;
z-index:-1;
margin:0;
padding: 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Im looking for a way to limit the background-size: cover; to stop scaling after it reaches overall width 1090.
UPD1 - http://jsfiddle.net/G7F7L/2/ FIDDLE LINK
UPD2 - 1 of the solutions I found myself.
#media only all and (max-width: 1298px){
#bg6 {
background: url(../../../images/para/6.jpg) center bottom no-repeat fixed;
height:400px;
width:100%;
position:relative;
-webkit-background-size: auto;
-moz-background-size: auto;
-o-background-size:auto;
background-size: 1298px auto;
z-index:-1;
margin:0;
padding: 0;
}
}
It's kinda messy, but it does the job. After getting under 1298px, background stops stretching.
Is this what you are looking for?
http://jsfiddle.net/JyeA9/1/
background-size:100% auto;
I have done some parallax stuff and have run into the same issues. The one issue with a stretch background in parallax is as the image gets smaller you have to adjust your divs with media queries, else it messes up the image-size to div ratio.
When i choose a image to put as a background of my div i can't manage to make it look normal. The width and height of my header are made with em. Can someone explain me how i can get a image as a background at my header when the header is like: 120em width. 5em height. So i need to make a normal header background the size of my header.
.header{
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-image:url('images.jpg');
text-align: center;
width: 120em;
height:5em;
background-size:100%;
}
.left{
background-color:red;
float: left;
width: 20em;
height: 51em;
}
.middle{
background-color: green;
width:120em;
padding:0px;
margin:0px;
height:51em;
}
.footer{
height:4em;
width: 120em;
background-color: blue;
}
Check here, http://css-tricks.com/perfect-full-page-background-image/
DEMO http://jsfiddle.net/yeyene/PtEnY/3/
#yourHeader{
float:left;
width:120em;
height:5em;
background: url(images/bg.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.jumbo-background {
background: url(image/bg.jpg) no-repeat center/cover;
}
I think I understand what you are try to achieve, the above is what I use, just drop it on the highest level div where you want the background image and it should stay relatively "in frame" as the page scales. You way want to add a bit to this for compatibility but the above is the general gist.