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;
}
Related
.jumbotron{
width:100%;
height:50vh;
background: url('longboard.jpeg');
color:white;
}
I'm trying to build a "jumbotron" from scratch. Currently the html for it is just a with nothing in it. As of right now the picture simply cuts off on the right side while my navbar scales downward. i would like the background picture to also shrink with it. How do I go about doing this?
Also whenever I add a or anythign to the div a margin appears above my navbar which I didn't thing was connected. Sorry in advance if i broke any posting etiquette, this is my first post on here.
Maybe try this:
.jumbotron {
background: url('longboard.jpeg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 50vh;
width: 100%;
overflow: hidden;
color: white;
}
Resource - https://css-tricks.com/perfect-full-page-background-image/
The simplest way is to set the background size to "cover"
.jumbotron {
background-image: url('longboard.jpeg');
background-size: cover;
height:50vh;
color:white;
}
I want to have a responsive screen height background image as shown in this site http://www.flavorplate.com/. I did research on google and github on that technique but wasn't able to find anything.
Basically you can do something like this:
<div class="bg-image">
<!-- Featured Content absolute -->
</div>
<div class="content-wrap">
<!-- More Content -->
</div>
html {
height:100%;
}
body {
height: 100%;
}
.bg-image {
background: url(../img/background.jpg) no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
}
.content-wrap {
heigth: auto;
min-height: 600px;
}
For conditional loading of background-images, you have to use media queries or/and javascript or a plugin like this: https://github.com/M6Web/picturefill-background
Well, it's incredibly easy, try this:
background: url(../IMAGES/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
/* For mobile devices */
#media only screen and (max-width: 767px) {
/* The file size of this background image is 93% smaller
* to improve page load speed on mobile internet connections */
background: url(images/background-photo-mobile-devices.jpg);
}
}
You want some more comprehensive Ideas?!! check this out;
Background Full
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!
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.