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
Related
i have a background image and i want to use it on my website but the problemn is i cant make it full height and width in any size, help me and please, check the codes below
current code, code #1 : haft and not full
body {
background: url(http://localhost/wordpress/wp-content/uploads/2016/11/CHRISTINE-BACKGOURND.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
/* background-size: cover; */
height: auto!important;
width: 100%!important;
}
code # 2
body {
background: url(http://localhost/wordpress/wp-content/uploads/2016/11/CHRISTINE-BACKGOURND.jpg) no-repeat center center fixed;
background-color: white;
background-size: auto 100%;
background-repeat: no-repeat;
background-position: left top;
}
i cant make it full width and height :( please help
html{
width:100%,height:100%;
}
body{
background-image: url(https://i.stack.imgur.com/s0G3w.jpg);
height:100%;
width:100%;
}
<body>
</body>
Please try this
HTML
<body></body>
CSS
html{
width:100%,height:100%;
}
body{
background: url(../image.jpg) no-repeat;
background-size:cover;
height:100%;
width:100%;
}
profit website for an organisation.
this is the link www.notevayaslionel.com
Website is great in desktop however when you go mobile you can see that apparently the image in the background is bigger than the window screen and you can scroll sideways.
How con I solve this? I dont want any sideway scrolling.
This is my CSS:
/* Parallax Background ==================================================*/
#parallax {
height:100%;
width:100%;
top:0;
position:fixed;
background-image:url(https://trancazos.files.wordpress.com/2016/06/las-redes-sociales-a-messi-no-te-vayas-lio.jpg?w=1024);
background-position:center center;
background-repeat:no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index: -100;
}
Add this to your styles . It will make your website responsive:
#centeralign iframe {
width: 100%;
max-width: 500px;
}
I'm trying to create a responsive website but ran into a problem with the background. It doesn't stretch the way it should.
Here's a fiddle with my code: http://jsfiddle.net/8jd1hax4/
And here's the bit of my CSS with the background
body{
background-image:url('Background.jpg');
background-size: cover;
background-repeat:no-repeat;
background-position:center;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
-ms-content-zooming: none;
max-width:100%;
max-height:100%;
font-family: 'Scout', arial, sans-serif;
color:#fff;
}
You can best see my problem when you make the fiddle more narrow, the white space appears at the bottom. It also shows the white space on my mobile, which is weird because I added a media query for that size.
Any idea how to get it to stretch all the way to the bottom? I've tried adding a transparent border and padding on the bottom, both to no avail.
Thanks! :)
The problem with having the background on the body is that the body is not necessarily the full screen, but only as much of the screen as has content. So when you resize and the content gets shorter, the body gets shorter.
One solution would be to put a wrapper tag around your content:
<body>
<div class="wrapper">
(All other content goes here)
</div>
</body>
CSS:
body {
margin: 0px;
padding: 0px;
overflow: hidden;
}
.wrapper {
background-image:url('http://capeanntunaclub.com/images/Background.jpg');
background-size: cover;
background-repeat:no-repeat;
background-position:center;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
-ms-content-zooming: none;
position:absolute;
width:100%;
height:100%;
overflow: scroll;
font-family: 'Scout', arial, sans-serif;
}
Fiddle: http://jsfiddle.net/8jd1hax4/2/
For the record, here's another option for you: http://jsfiddle.net/panchroma/xrz4v4L4/
The important bit is that I'm setting the background image on the html element, so it's sure to include the full height of the browser window.
html {
background: url(http://capeanntunaclub.com/images/Background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
The credit for this and other solutions goes to http://css-tricks.com/perfect-full-page-background-image/
Good luck!
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;
}
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.