I defined with background image as following.Html:
<body onload="myFunction()">
<h4>Entities Presenter</h4>
<div class="bg">
<canvas id="my-canvas" class="canvas"></canvas>
</div>
</body>
CSS:
body,
html {
height: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url("wp2753284.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
But the background image after definitions above displayed cutted ( from top and bottom), Is there something wrong in the definition ? Thanks in advance
instead of background-size: cover;
try background-size: contain;
Related
How can I disable responsive background img behavior ?
My background img in larger screen is like this :
And I want this behavior when I resize screen (small screens). (I want that the img will be cut automatically) : does a css property exist for this ?
My code is :
.bg {
background-image: url(assets/images/bg.png,
background-repeat: no-repeat;
}
<div class="container-full bg">
<div class="container">
<div>My content....</div>
</div>
I am in bootstrap project , and my background img is responsive, how can I disable this please ?
here is a quick cutout. You can position the image left, center or right. The image will be trimmed automatically.
You can define the height for yourself.
body {
margin: 0;
}
.bg {
background-image: url("https://i.stack.imgur.com/jtaEI.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
height: 400px;
}
<div class="bg">
<div>My content....</div>
</div>
edit
Please be aware that you need semicolons in .css after each declaration
your code:
.bg {
background-image: url(assets/images/bg.png,
background-repeat: no-repeat;
}
need to look like this:
.bg {
background-image: url("assets/images/bg.png");
background-repeat: no-repeat;
}
I am currently positioning a background image that is small in height but large in width to stretch all the way across the browser. I am only able to achieve this when I do background size cover, but not when I set a certain size to the image other than cover. I tried background repeat-x but that does not seem to work either.
<html>
<body>
<div class="background">
<div class=“header”></div>
//some content
</div>
<footer><footer/>
</body>
</html>
CSS
.background {
background-image: url(some image);
background-size: //tried cover and it works but not when I set it to width 100% or something like 2800px
background-repeat: repeat-x;
background-position-y: bottom;
}
html, body, .background {
height: 100%;
}
Just add background-size: cover code in css will resolve the issue.
.background {
background-image: url(some image);
background-size: cover;
background-repeat: repeat-x;
background-position-y: bottom;
}
html, body, .background {
height: 100%;
}
It is working with background-size:100%;
.background {
background-image: url("marakele-elephant1.jpg");
background-size: 100%;
background-repeat: no-repeat;
background-position-y: bottom;
}
html, body{
height: 100%;
}
body {
background-image: url(http://ppcdn.500px.org/75319705/1991f76c0c6a91ae1d23eb94ac5c7a9f7e79c480/2048.jpg) ;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #999;
}
div, body{
margin: 0;
padding: 0;
}
.wrapper {
height: 100%;
width: 100%;
}
<div class="wrapper">
<div class="message"></div>
</div>
Not very related to this question but I hope this answer will save someone's time
For the people who are using bootstrap. Keep the image inside a container, check again if it is inside class="container", I had a typo, I wrote classs instead of class and the background image wouldn't fit.
Second, close previous divs.
Third, if you don't use container and start with just <div class='row'></div>, background image won't fit.
Working Example:
<div class="container" style="background-image: url('img'); background-size: cover;">
<div class="row">
</div>
</div>
I'm curious if the CSS unit vw (view width) will accomplish what you are trying to do with width: 100%
Instead of width: 100%, try width: 100vw
https://www.w3schools.com/cssref/css_units.asp
I have a background image set as a background, and I want it so, when the user scales down the window, it will resize with it:
HTML:
<div class="parallax">
</div>
CSS:
.parallax {
background-image: url("../Images/back1.jpg");
min-height: 700px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding: 100px 20px;
}
I got it to work when I changed background-size: cover; to contain, but it cuts out some of the image from the left and right side.
Fiddle Link : here
In addition to my comments, here is what I wrote about in the last comment - a regular img tag with width: 100%and height: auto instead of a background-image:
img {
width: 100%;
height: auto;
}
<div>
<img src="https://wallpaperscraft.com/image/coffee_hand_glass_scarf_113704_1366x768.jpg">
</div>
The code below makes the background image responsive too when a window is resized. I have updated your css code, removed min-height and background fixed and made the padding percentage in top and bottom.
.parallax {
background: url(https://wallpaperscraft.com/image/coffee_hand_glass_scarf_113704_1366x768.jpg) no-repeat center / cover;
padding: 30% 0;
}
<div class="parallax">
</div>
I would like to have background image to whole width. I have CSS code as below.
background: url(../images/img.png) 50% 50% no-repeat;
-webkit-background-size: auto 100%;
background-size: auto 100%;
But with this code image has margin with two sides. I made margin:0 in body tag of course.
Thanks for help!
You can use following css.
body, html {
height: 100%;
}
.bg {
/* The image used */
background-image: url(../images/img.png);
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
You are starting the background with 50% 50% which is kinda weird. So what you do is to use background-size: cover; and make sure you give no-repeat:
body {background: url("https://images.unsplash.com/photo-1489844097929-c8d5b91c456e?dpr=1&auto=format&fit=crop&w=1500&h=998&q=80&cs=tinysrgb&crop=") no-repeat; background-size: cover;}
I have image (width = 1920px) and I need to show the whole image at Full HD resolution (width=1920px) the middle of the image at smaller resolutions (see screenshot):
screenshot
Could you help me add CSS style to display center of image at smaller resoultions?
//html:
<body>
<div class="header">
</div>
</body>
//css:
html, body {
margin: 0;
padding: 0;
}
.header{
background-image: url(Header.png);
width: 100%;
height: 292px;
}
Try this one:
background-image: url('path/to/img.png');
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
And optional:
background-position: center;
Use background-position: center; to center the image, so when the width is less then the image size, the center will be remain visible.
.header {
height: 1080px;
background: url(http://www.cats.club/wp-content/uploads/2017/03/image_header_option.jpg);
background-size: cover;
background-position: center;
}
<header class="header"></header>
Just use background-position: center; and background-size: cover;.
You can find documentation on these attributes and property values here.
See the snippet. The original image is of three pirate skulls. Here you can see it is centered on the parent div.
.header {
width: 200px;
height: 200px;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/Flag_of_Christopher_Condent.svg/1000px-Flag_of_Christopher_Condent.svg.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
<div class="header">
</div>