Thanks in advance for your help.
I'm developing a simple landing page here:
www.checkinplace.com
You will see that this simple contact form is responsive.
The normal view is this one:
When you resize the screen to its minimum width you get this:
Now, the problem is when you want to see the page on a mobile device.
Here all looks good:
... but when you scroll down:
The basic CSS for the background goes like this:
<style>html { background: url(/site/assets/img/backgrounds/background.jpg) no-repeat; background-size: cover; }</style>
By the way, I have a bug with the button that will try to solve by other means.
Do you know how could I solve this?
Thanks again for your help!!
What you can do is stretch the background image.
You can do so by replacing background-size:cover; with background-size:100% 100%;
Your css code would look like this:
<style>html { background: url(/site/assets/img/backgrounds/background.jpg) no-repeat; background-size: 100% 100%; }</style>
Already solved it by doing this:
<img alt="Background image" id="backgroundImg" src="/site/assets/img/backgrounds/<?php echo($fileName); ?>" />
#backgroundImg {
position: fixed;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
z-index: -1;
}
Thanks.
Related
I want to have my background picture fill out the whole screen but I can't find a solution to fix my problem. Would be cool if someone could give me a solution for all mobile devices.
This is what my screen would look like now:
I tried many things. Here is my current code:
html {
background: url('/path/to/img') no-repeat center center fixed !important;
background-size: cover !important;
height: 100%;
}
Try :
html { background-image: ...
no-repeat;
background-size: cover;
width: 100%; }
This is the code that I am using in my html. I know i have linked my style sheet properly because the rest of the styling works. So I have no idea why this specific background image just does not work in my code. It does not display anywhere on the webpage when I try to load it up so i honestly have no idea what is wrong.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="showcase">`
</header>
</body>
</html>
This is in my css. I have triple checked that the name of the image correlates and it is definitely in a images folder in my main folder but I just do not understand why this is not working. I am a bit new but I am still confused.
.showcase {
width: 100%;
height: 93vh;
position: relative;
background-image: url('../images/background.png') no-repeat center center/cover;
}
The answer is that you are putting the values no-repeat center center/cover under the background-image property, instead of the background property. It should actually look like so:
.showcase {
width: 100%;
height: 93vh;
position: relative;
background-image: url('.../images/background.png');
background: no-repeat center center/cover;
}
That should work. If not, try changing the position to absolute or auto. If all that doesn't work, try changing the center/cover to just center or cover.
Thank you for the help I managed to sort it out and it is working fine now. I removed the ../ from my background-image: url('../images/background.png'); and I changed my center/cover to just cover as the second center was causing it to not work. My new code now looks like this and is working perfectly.
.showcase {
width: 100%;
height: 93vh;
position: relative;
background-image: url('images/background.png');
background: no-repeat center cover;
}
I am relatively new to HTML and CSS, however "Skill comes with practice".
I would like to create a pagescroll effect similar to this page:
Jolla
The difficult thing is to get the effect on every device.
So every device should see the full picture fullscreen (don't see text below; example: don't see the "we are unlike"-stuff).
However if any device scrolls down a bit (one scrool), the picture should slide to the top and the following text should be revealed.
Hope you guys can follow me.
Thanks in advance :)
There is a simple way to do this using css properties.
All you have to do in your html is...
<div></div>
In your css...
div {
width: 100%;
height: 100%;
}
div {
background-image: url("rand_img.jpg");
background-attachment: fixed;
background-size: cover;
}
Try the code here. There's also more in depth article by css-tricks.com that this is based off of.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Header</title>
</head>
<body>
<div id="background">
</div>
<style>
#background {
background-image: url("https://hd.unsplash.com/photo-1471705301355-ec78367a7b07");
position: fixed;
top: 0;
left: 0;
/* Preserve aspet ratio */
min-width: 100%;
min-height: 100%;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
</style>
</body>
Be sure to keep up the good work in learning and practice, practice, practice!
I'm trying to setup a new bg on my website, but I can't make it work. Basically I have a picture (size 50x2000 px) and I want to create repeated background. In my CSS I used :
#test{
width: 50px;
height: 100%;
background:url(images/bg.png);
background-repeat:repeat-x;
min-width: 100%;
position: absolute;
}
And it's partly working, I can see that the bg is repeated but there is a problem with hight. My web browser should squeeze the hight of the picture to fit the whole picture in a website, and right now I can see only the top of the picture, it's because the picture hight is too big 2000 px. So what I have to change in my CSS code to make the bg fit in to my website ?
Thanks
Update your CSS as
#test
{
width: 50px;
height: 100%;
background:url(images/bg.png);
background-repeat:repeat-x;
min-width: 100%;
position: absolute;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
well background-repeat:repeat-x; should be background-repeat:repeat-y; if you want to do it vertically. look hear
edit, try to remove those absolut and other options so the browser can handle the rest:
#test{
background:url(images/bg.png);
background-repeat:repeat;
}
add this to your css
height:2000px;
as in:
#test{
width: 50px;
height: 2000px;
background:url(images/bg.png);
background-repeat:repeat-x;
min-width: 100%;
}
it should solve your problem.
UPDATE:
this is the Fiddle. the image you use in your fiddle is 900px so I set height to 900px.and I think your problem is solved.please explain more about your problem if it is not it.
Q : why do you need absolute position ? remove it.
So I have an image (w:1638px h:2048px) and I set it as my background using the background-image function and then trying to give it width: 100%; and height: 100%; attributes. It stretches the image across the screen horizontally but then it makes me scroll down for the rest of it. I want no scrolling. Is there a way to crop/position a portrait orientated image to look proportional and fill the screen as a background properly? Should I make it a different size in Photoshop, something landscape orientated?
I have a regular <div class="bgimage></div> in the html and the css looks like this:
.bgimage {
height: 100%;
width: 100%;
background-image: url(images/background.jpg);
background-repeat: no-repeat;
background-size: cover;
position: absolute;
}
Is there something I'm missing or not doing correctly? I'm using Dreamweaver CS6 and viewing it in the latest versions of Firefox/Safari.
Thank you.
If you're setting the background for the whole page, just style the body element instead:
body {
background-image: url(images/background.jpg);
background-repeat: no-repeat;
background-size: cover;
}
http://jsbin.com/rugom/2