This boundary line is not permanent. It seems more like an ios rendering bug. Is there any workaround with css?
looks bad:
make some actions, like switching the app into background and reopen it, and the bug disappears
the css of blurred background image is
.img {
position: absolute;
top: 0;
left: 0;
width: 80%;
height: 100%;
object-fit: cover;
filter: blur(20px);
opacity: 0.1;
}
I have a website (g-floors.eu) and I want to make the background (in css I have defined a bg-image for the content) also responsive. Unfortunately I really don't have any idea on how to do this except for one thing that I can think of but it's quite a workaround. Creating multiple images and then using css screen size to change the images but I wanna know if there is a more practical way in order to achieve this.
Basically what I wanna achieve is that the image (with the watermark 'G') automatically resizes without displaying less of the image. If it's possible of course
link: g-floors.eu
Code I have so far (content part)
#content {
background-image: url('../images/bg.png');
background-repeat: no-repeat;
position: relative;
width: 85%;
height: 610px;
margin-left: auto;
margin-right: auto;
}
If you want the same image to scale based on the size of the browser window:
background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;
Do not set width, height, or margins.
EDIT:
The previous line about not setting width, height or margin refers to OP's original question about scaling with the window size. In other use cases, you may want to set width/height/margins if necessary.
by this code your background image go center and fix it size whatever your div size change , good for small , big , normal sizes , best for all , i use it for my projects where my background size or div size can change
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;
Try this :
background-image: url(_images/bg.png);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
CSS:
background-size: 100%;
That should do the trick! :)
Here is sass mixin for responsive background image that I use. It works for any block element. Of course the same can work in plain CSS you will just have to calculate padding manually.
#mixin responsive-bg-image($image-width, $image-height) {
background-size: 100%;
height: 0;
padding-bottom: percentage($image-height / $image-width);
display: block;
}
.my-element {
background: url("images/my-image.png") no-repeat;
// substitute for your image dimensions
#include responsive-bg-image(204, 81);
}
Example http://jsfiddle.net/XbEdW/1/
This is an easy one =)
body {
background-image: url(http://domains.com/photo.jpeg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
Take a look at the jsFiddle demo
Here is the best way i got.
#content {
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-size:cover;
}
Check on the w3schools
More Available options
background-size: auto|length|cover|contain|initial|inherit;
#container {
background-image: url("../images/layout/bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
height: 100vh;
margin: 3px auto 0;
position: relative;
}
I used
#content {
width: 100%;
height: 500px;
background-size: cover;
background-position: center top;
}
which worked really well.
Responsive website by add padding into bottom image height/width x 100 = padding-bottom %:
http://www.outsidethebracket.com/responsive-web-design-fluid-background-images/
More complicated method:
http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios
Try to resize background eq Firefox Ctrl + M to see magic nice script i think best one:
http://www.minimit.com/demos/fullscreen-backgrounds-with-centered-content
You can use this. I have tested and its working 100% correct:
background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:100%;
background-position:center;
You can test your website with responsiveness at this Screen Size Simulator:
http://www.infobyip.com/testwebsiteresolution.php
Clear Your cache each time you make changes and i would prefer to use Firefox to test it.
If you want to use an Image form other site/URL and not like:
background-image:url('../images/bg.png');
//This structure is to use the image from your own hosted server.
Then use like this:
background-image: url(http://173.254.28.15/~brettedm/wp-content/uploads/Brett-Edmonds-Photography-14.jpg) ;
Enjoy :)
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#res_img {
background: url("https://s15.postimg.org/ve2qzi01n/image_slider_1.jpg");
width: 100%;
height: 500px;
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
border: 1px solid red;
}
#media screen and (min-width:300px) and (max-width:500px) {
#res_img {
width: 100%;
height: 200px;
}
}
</style>
<div id="res_img">
</div>
If you want the entire image to show irrespective of the aspect ratio, then try this:
background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:100% 100%;
background-position:center;
This will show the entire image no matter what the screen size.
background:url("img/content-bg.jpg") no-repeat;
background-position:center;
background-size:cover;
or
background-size:100%;
Just two lines of code, it works.
#content {
background-image: url('../images/bg.png');
background-size: cover;
}
Adaptive for square ratio with jQuery
var Height = $(window).height();
var Width = $(window).width();
var HW = Width/Height;
if(HW<1){
$(".background").css("background-size","auto 100%");
}
else if(HW>1){
$(".background").css("background-size","100% auto");
}
background: url(/static/media/group3x.6bb50026.jpg);
background-size: contain;
background-repeat: no-repeat;
background-position: top;
the position property can be used to align top bottom and center as per your need and background-size can be used for center crop(cover) or full image(contain or 100%)
I think, the best way to do it is this:
body {
font-family: Arial,Verdana,sans-serif;
background:url("/images/image.jpg") no-repeat fixed bottom right transparent;
}
In this way there's no need to do nothing more and it's quite simple.
At least, it works for me.
I hope it helps.
Try using background-size but using TWO ARGUMENTS One for the width and the other one for the height
background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size: 100% 100%; // Here the first argument will be the width
// and the second will be the height.
background-position:center;
I have a website in which I want there to be a picture that is as displayed at 100% width and 100% height with a button on it that scrolls the page the height of the window. I want this button to be centered vertically and horizontally but everything I try doesn't work and i cannot seem to get it to scroll either. I will take an answer for either problem.
https://jsfiddle.net/cityFoeS/278dcyqg/
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
height: 100%;
width: 100%;
background: -webkit-linear-gradient(left top, black, #404040); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom right, black, #404040); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, black, #404040); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, black, #404040); /*Standard syntax (must be last) */
background-repeat: no-repeat;
background-attachment: fixed;
}
#start {
color: white;
background: url('http://www.wallpaperup.com/uploads/wallpapers/2013/05/16/86283/a5d366f61be34ae146c3acc00e288ade.jpg') no-repeat center center fixed;
height:100%;
width: 100%;
padding:20px;
box-sizing: border-box;
}
#reading {
height: 100%;
width: 100%;
}
</style><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
function scrollWin() {
var h = window.innerHeight;
window.scrollTo(0, h);
}
</script>
</head>
<link href='https://fonts.googleapis.com/css?family=Julius+Sans+One' rel='stylesheet' type='text/css'>
<body>
<div id="start"><button id="start-reading"onclick="myFunction()">Start Reading</button></div>
<div id="reading"></div>
</body></html>
Your problem is in the HTML, <div id="start"><button id="start-reading"onclick="myFunction()">Start Reading</button></div>
Look at the onclick part, you are calling a function that doesn't exist.
You could just change it to the correct function name and it would work but I have instead made a fiddle with the best practice:
https://jsfiddle.net/278dcyqg/1/
You should try and avoid using onclick on the actual HTML tag, and try to handle all events through JavaScript
The CSS background-attachment: fixed; does not work on mobiles because it takes a performance hit or something like that.
Is there an alternative for this that fully works on mobile?
I tried this:
$(window).scroll(function() {
var scrolledY = $(window).scrollTop();
$('div#home').css('background-position', 'left ' + ((scrolledY)) + 'px');
});
But that was very choppy on my Mac using chrome, so I didn't even bother testing on my iPhone.
I see many plugins for a parallax effect but can't find any that work on mobile. I saw some previous questions on this and other forums but those links were either dead or outdated now.
In our ever advancing world, have apple been bothered to render stuff properly?
Basically...
Is there a fix to background-attachment: fixed that works on all devices including mobile?
Code from dmoo's link:
div#home {
color: #404040;
/*
background: linear-gradient(to bottom, rgba(0,0,0, 0.375) 0%,rgba(0,0,0, 0.375) 100%), url(/images/sp-bg.jpg);
background-size: cover;
*/
overflow: hidden;
position: relative;
}
div#home:before {
content: ' ';
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: white;
background: url('/images/sp-bg.jpg') no-repeat center center;
background-size: cover;
will-change: transform;
}
I would like my css image to cover the whole screen, I am randomly choosing an image from a JS array. It is showing the image, but is not showing a Perfect Full Page Background Image.
main.html
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<button id = "button1">Click</button>
<script src = "main.js"></script>
</body>
</html>
main.js
document.getElementById("button1").addEventListener("click", function(){
showImage();
});
...
function showImage(){
document.write('<img class = "bg" src="'+theImages[whichImage]+'">');
}
main.css
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
#media screen and (max-width: 1024px) { /* Specific to this particular image */
img.bg {
left: 50%;
margin-left: -512px; /* 50% */
}
}
What kind of css is that? I don't recommend using vw/vh either.
You'd be best off using standard background sizes and positions like
/*background-image: url(../images/background.png);*/ optional
background-size: cover;
background-repeat: no-repeat;
background-position: left top;
and you could always add
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
for total cross-browser compatibility
I agree that setting the document.body.style['background-image'] attribute would be the best way to go, especially since it allows you to cope with the image shape not matching the screen shape (fix using background-position and background-size). If you still want to use an <img>, you can use the CSS3 length units vh, vw. Support for modern browsers can be found here.
img.bg {
width: 100vw;
height: 100vh;
}
Notice the image will not become higher than the view-port, even if the body element does (i.e. there is a scroll-bar).