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).
Related
I am trying to load a simple webpage that has an image that covers the entire page background. However, when the page is first loaded, there is a noticeable white flickering for a split second as the image is being loaded. I have already tried suggestions such as but to no effect. Here is my code below:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
height: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url("img_girl.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div class="bg"></div>
</body>
</html>
Does anybody have a solution to remove the flickering effect?
You can set .bg with opacity 0, then with jQuery once the page is done loading add a class set with opacity 1.
If you want a "fadein" effect simply add a transition.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body, html {
height: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url("img_girl.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
transition: opacity 1.3s ease-out;
opacity: 0;
}
.bg.visible{
opacity: 1;
}
</style>
</head>
<body>
<div class="bg"></div>
</body>
<script type="text/javascript">
$(document).ready(function(){
$(window).on("load",function(){
$('.bg').addClass('visible');
});
});
</script>
</html>
Maybe not the best solution but it works for me.
If you want an image that covers the entire page background, you should directly set it for the <body> element like this:
body {
background-image: url(your_url/your_image.png);
background-position: center; // to center the image
background-repeat: no-repeat; // to not repeat the image
background-size: cover; // to cover the element
background-color: #000; // fallback if the image is not available
}
or with the CSS shorthand more compact:
background: #000 url(your_url/your_image.png) no-repeat center;
background-size: cover;
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 am creating a home page for a website and I am attempting to copy part of the background img to use as a nav link so i can manipulate it. When i design the page every thing will look good but when i view on different screens the overlay is thrown out of align.
I have tried to implement screen.width and screen.height, from JavaScript, to capture the sizes and pass them as a var into HTML code. Then i use HTML top % and left/right %
to adjust the overlaying nav to match up with the background img.
<script>
//capture the screen size
var w =screen.width;
var h = screen.height;
</script>
<style>
body {
background:url("screen.jpg")no-repeat left top fixed;
background-size: w h;
}
#b1{
background-size: 180px 70px;
background: no-repeat left top fixed;
padding: 130px 50px;
color: white;
text-align: center;
background-image: url("b1.png");
margin: 0;
position: absolute;
top: 55.3%;
left: 11.5%;
transform: translate(-50%, -50%);
Does anyone have a fix for this? is it a HTML or JavaScript issue?
#JohnLiebig a couple of things. When you are working within CSS you should not be using HTML or JS related variables/methods. If you would like to use CSS variables the formatting can be found here.
The below snippet was found on MDN under 'background-size.'
.foo {
background-image: url(bg-image.png);
-webkit-background-size: 100% 100%; /* Safari 3.0 */
-moz-background-size: 100% 100%; /* Gecko 1.9.2 (Firefox 3.6) */
-o-background-size: 100% 100%; /* Opera 9.5 */
background-size: 100% 100%; /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */
-moz-border-image: url(bg-image.png) 0; /* Gecko 1.9.1 (Firefox 3.5) */
}
This question already has answers here:
How do I auto-resize an image to fit a 'div' container?
(33 answers)
Closed 4 years ago.
http://jsfiddle.net/Log82brL/15/
This <img> isn't shrink wrapping as I would expect with min-width:100%
I'm trying to shrink the <img> until either height or width matches the container
Click anywhere in the <iframe> to toggle container shapes
Please try to edit the <img> CSS:
MAINTAIN ASPECT RATIO
COVER ENTIRE SURFACE AREA OF CONTAINER DIV
ONLY EDIT THE IMAGE
My question is specifically: scale an <img> to maintain aspect ratio but cover the entire surface of parent <div> even as the parent <div> resizes.
Maybe I could somehow use css flex box-layout or something? Maybe a transform?
http://jsfiddle.net/Log82brL/7/
#img {
width: 100%;
height: 100%;
object-fit: cover;
}
object-fit: cover allows the replaced content is sized to maintain its aspect ratio while filling the element’s entire content box: its concrete object size is resolved as a cover constraint against the element’s used width and height.
If you don't want to touch the container, put the background on the <img>
#img {
background: url(imgpath) no-repeat center;
background-size: cover;
}
You can set HTML source to a transparent base64 pixel (credit CSS Tricks)
<img id="img" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
http://jsfiddle.net/Log82brL/17/
Did u try the bootstrap solution
http://getbootstrap.com/css/#images-responsive
which is pretty much
.img-responsive
{
max-width: 100%;
height: auto;
display: block;
}
Adding to your update question
http://jsfiddle.net/arunzo/Log82brL/5/
.skinny>img
{
max-width:none !important;
min-height:none !important;
max-height:100%;
-webkit-transform:translate3d(+50%, +50%, 0);
}
And still i am unsure what is that you seek, sorry for the jerky animation.
You can use CSS background instead of HTML img.
.myDiv
{
height: 400px;
width: 300px;
background-image: url('image-url.png');
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
border: 1px solid #000000;
}
<div class="myDiv">
</div>
Here is the JS Fiddle Demo.
Try to change height and width - you will see that image stretches to fill the div.
You can also different background-size values:
Proportional stretch to contain: background-size: contain;
Too tall div
Too wide div
Proportional stretch to fill: background-size: cover;
Too tall div
Too wide div
Stretch to fill 100%: background-size: 100% 100%;
Too tall div
Too wide div
use single css background shorthand property
.myDiv
{
height: 400px;/*whatever you want*/
width: 300px;/*whatever you want*/
background: url('image-url.png') no-repeat center center;
background-size: contain;
}
<div class="myDiv">
</div>
Updated answer. Now works as intended.
var toggle = false,
containerElement = document.querySelector("#container");
window.onclick = function () {
containerElement.className = (toggle = !toggle ? "skinny" : "");
}
window.alert("click anywhere to toggle shapes. img is a large square");
#container {
overflow: hidden;
width: 400px;
height: 200px;
transition: all .5s;
margin: 0 auto; /* this is just for demonstration purposes */
}
#container.skinny {
width: 200px;
height:600px;
}
#img {
height: auto;
left: 50%;
margin: auto;
min-height: 100%;
position: relative;
top: 50%;
transform: translate(-50%, -50%); /* changed to 2d translate */
width: 100%; /* full width in wide mode */
}
#container.skinny #img {
width: auto; /* width reset in tall mode */
}
<div id="container">
<img id="img" src="http://farm8.static.flickr.com/7440/12125795393_3beca9c24d.jpg" />
</div>
http://krasimirtsonev.com/blog/article/CSS-Challenge-1-expand-and-center-image-fill-div
contained AND centered
I think this is the rendering you're trying to get, this might help ;)
https://jsfiddle.net/erq1otL4/
<div id="container" style="background-image: url(http://farm8.static.flickr.com/7440/12125795393_3beca9c24d.jpg);"></div>
#container.skinny {
width: 400px;
height:600px;
}
#container {
width: 400px;
height: 200px;
overflow: hidden;
background-size: cover;
background-color:pink;
background-position: center center;
}
var toggle = false,
containerElement = document.querySelector("#container");
window.onclick = function () {
containerElement.className = (toggle = !toggle ? "skinny" : "");
}
window.alert("click anywhere to toggle shapes. img is a large square");
A while back I found a jQuery solution called "backstretch". Now this looks possible with CSS3:
html {
background: url(images/bg.jpg) no-repeat center center fixed;
background-size: cover;
}
Usually to achieve that you need to use:
parentdiv img {
width:100%;
height:auto;}
in order to make your image resize with the parent div.
This can cause some cropping issues (visually) if you set the overflow to hidden.
Try this:
<div class="img_container">
<img src="image/yourimage.jpg" alt="" />
</div>
<style type="text/css">
.img_container{
width: 400px;
height: 400px;
overflow: hidden;
}
.img_container img{
width: 100%;
height: auto;
}
</style>
setting the height or the with auto will not make the image look stretched.
Use this class of Bootstrap .img-responsive and if parent div changes add media Queries to image and div both
Here is a very simple CSS solution that does not require changing the attributes of an img tag.
div{
background-image: url("http://www.frikipedia.es/images/thumb/d/d5/Asdsa-asdas.jpg/300px-Asdsa-asdas.jpg");
height: auto;
width: 400px;
overflow: hidden;
background-size: cover;
background-position: center;
}
PROBLEM SOLVED
I'm working on a personal website and my background image won't appear, I am using a JavaScript code to change my background color from time to time and my default background-image is set to a color so my the first second of website won't appear white. Could that be the problem of my image not appearing?
This is part of my html code:
<!doctype html>
window.onload = function() {
var currentColor = '#61a18e';
setInterval(function() {
document.body.style.backgroundColor = currentColor;
currentColor = currentColor === '#dd9023' ? '#61a18e' : '#dd9023';
}, 10000);//
};
</script>
</head>
<body>
<div id="wrapper">
<div class="nowplaying">
Text
</div>
<div class="song">
TExt
</div>
</div>
</body>
</html>
And this is a part of my css code including html, body and the main wrapper container(if it helps for some reason):
html, body{
width:100%;
height:99%;
position: relative;
margin: auto;
background-color:#61a18e;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
background-image:url ('img/background.png');
}
#wrapper{
position:absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
position:absolute;
width: 50%;
height: 40%;
overflow: auto;
}
Hope I'm not missing anything here.
Thanks
EDIT :
Interesting my code on JSFiddle is working....
But none of my browser (Mozilla and IE9) is showing any image,but if i insert it with the image is showing...
Is there some settings to browser not showing?
NEW EDIT!
Problems solved, silly for me, but it looks like I should have put background-image:url ('../path');, for some reason it won't take without the ../.
Thanks for the help.
It’s the extra space between "url" and the parenthesis.
background-image:url ('img/background.png');
Becomes
background-image: url('img/background.png');
Remove the space between url ('image.jpg').
Also, it's going to duplicate when you get it to work, for HTML and Body elements.
You are setting some colours via the tag. If they are for background and if you load the css file before it, the script will override it.
Here you go: http://jsfiddle.net/g8Jhe/1/
CSS
html,body
{
width:100%;
height:99%;
position: relative;
margin: auto;
background-color:#61a18e;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
background-image:url('https://www.google.com/images/srpr/logo11w.png');
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
}