I have an image here that I only want a specific position what to display. But mine is not working. I only want the hands to view without cropping the original image. Thanks in advance
Expected result
HTML
<div class="banner">
<h1>できる限り<br>
自然な形で育てた<br>
こだわりの野菜です。</h1>
<h4>生産者／川口太郎・川口久美子さん（安芸市）</h4>
</div>
CSS
.banner{
background: url(../img/img1.png);
background-size: 100%;
padding: 32% 0 5% 6%;
color: white;
letter-spacing: 0.1em;
border-radius: 1%;
}
Combination of background-size and background-position CSS attributes. Dont forget you can make the background-size value greater than 100%. I would throw this at it and fine tune from there:
.banner{
background: url(../img/img1.png);
// background-size takes height and width but shorthand is one value used for both
background-size: 200%;
// background-position options include center, cover, and more: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
background-position: center center;
}
Use CSS Clip. You can crop your image on the page without having to edit the original image source file.
https://www.w3schools.com/cssref/pr_pos_clip.asp
Looking your expected image, I thing you can try this:
background-repeat: no-repeat;
background-size: cover;
background-position: top;
Related
Down below is my code. I do not know how to resize the image as it is in one whole line of code. Do i create a new line of code and use a tag? I do not know what to do. Is there anything wrong?
#centerpicture {
min-height: 400px;
background: url("Enderman_wallpaper.jpg") no-repeat;
text-align: center;
color: #ffffff;
}
only one eye of the sprite is showing but it should show as one whole face of the sprite.
You can use one of the following properties to size your background images:
background-size: cover;
background-size: contain;
background-size: 30%; //using percentages
background-size: 100px 200px // using pixels
Play around with those properties and see what suits you best. Please refer to the documentation for more information.
To position your background image, use the background-position property.
Code style:
You can declare background properties on separate lines, or use the shorthand syntax:
background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
In your case, you can use this:
background: url('Enderman_wallpaper.jpg') 0%/30% no-repeat;
I'm building a website from CSS and HTML. I'm up to the point of adding a background image to my website. The trouble is, the image isn't showing up as the website's background.
My CSS code:
.bg {
background: url('https://ak9.picdn.net/shutterstock/videos/12047219/thumb/10.jpg?i10c=img.resize(height:160)');
height: 50%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: repeat-x;
background-size: cover;
}
<div class="bg"></div>
Just ask me if you need any more code from my website.
Edit: This is not a clone, I've tried every other solution that I've come across on here, and nothing works.
This works fine if you use fixed height:
In the below case I have used 100px;
.bg {
background: url('https://ak9.picdn.net/shutterstock/videos/12047219/thumb/10.jpg?i10c=img.resize(height:160)');
height: 100px;
/* Center and scale the image nicely */
background-position: center;
background-repeat: repeat-x;
background-size: cover;
}
<div class="bg">
</div>
But if you want it to be 100% of the screen you can always go with 100vh
.bg {
background: url('https://ak9.picdn.net/shutterstock/videos/12047219/thumb/10.jpg?i10c=img.resize(height:160)');
height: 100vh;
/* Center and scale the image nicely */
background-position: center;
background-repeat: repeat-x;
background-size: cover;
}
<div class="bg">
</div>
If you want to know more about vh visit this link
Hope this was helpful for you.
The background image for a page can be set like this:
body {
background-image: url("paper.gif");
}
so maybe you can change your code become :
.bg {
background-image: url('https://ak9.picdn.net/shutterstock/videos/12047219/thumb/10.jpg?i10c=img.resize(height:160)');
height: 100px;
/* Center and scale the image nicely */
background-position: center;
background-repeat: repeat-x;
background-size: cover;
}
If you want to add background image to whole HTML Page then use body tag.
body {
background-image: url("https://ak9.picdn.net/shutterstock/videos/12047219/thumb/10.jpg");
}
and if you want to add background to specific class then use this
.bg {
background-image: url('https://ak9.picdn.net/shutterstock/videos/12047219/thumb/10.jpg');
}
in that adjust your height accordingly. if you want to add to full class then use
height:100% else adjust it with your own condition.
The image that the OP refers to is a resized version of the original. This solution uses the original image along with CSS that uses a height of 100vh (as recommended by #weBBer) and auto for the width. The background position remains with a center value. It seems needless to repeat the image so the CSS uses no-repeat. This works with Google Chrome (version 49).
.bg {
background-image: url(https://ak9.picdn.net/shutterstock/videos/12047219/thumb/10.jpg);
width:auto;
height:100vh;
background-position: center;
background-repeat: no-repeat;
background-size:cover;
}
<div class="bg"></div>
The result is a centered image that fills the page due to background-size property being set to cover as well as the height property set to 100vh, i.e. 100% of the view port height; see more about this and other measurements here.
If you only wanted to fill the portion within the dimensions of the DIV then you could alter the CSS and replace background-size property with object-fit, as follows:
.bg {
background-image: url(https://ak9.picdn.net/shutterstock/videos/12047219/thumb/10.jpg);
height:480px;
margin-left:auto;width:100%;margin-right:auto;
background-position: center;
background-repeat: no-repeat;
object-fit:cover;
}
<div class="bg"></div>
My site has to be responsive and I'm supposed to build it "mobile-first".
It's a one page site and each section is divided by an svg image.
So far I've gotten it the width resize perfectly by using background-size:cover; but a small part at the bottom of the image gets cut off. I've tried adjusting the height (auto, 100%, random pixel value) but that doesn't seem to do anything :/
Any ideas?
#breakpink{
background-image: url(../images/break_pink.svg);
background-repeat: no-repeat;
background-size: cover;
height: 100%;
text-indent: -9999px;
}
Full code:
http://jsfiddle.net/duyBE/
Same problem happened for me. There is a solution for this problem that is posted in the accepted answer on this page: CSS: Full Size background image
The solution was to use: background-size: 100% 100%
But there was a drawback, that is when you zoom out the background along with the content, the "body" background appears at the bottom!
Use "background-size: contain" instead of "background-size: cover",
1 background-size : cover
Property value "cover" will make the image to cover available space, if the image is small then it will be scaled up to cover available space, If the image is big then it will be scaled down to cover the available space, in either case, there is a chance that image may get cropped in order to fill the available space.
Pros: It will cover the entire available space.
Cons: Image may get cropped.
2 background-size : contain
"contain" will make the image scale up or down to fit inside the available space.
Pros: Full image is displayed.
Cons: Image may be look stretched. And sometimes you will see empty space around the image.
html {
background: url(../images/break_pink.svg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
This will probably fix your problem
I was having a similar problem. I've added a padding-bottom: 10px; and it worked for me.
add a margin at the bottom of the element:
#breakpink{
background-image: url(../images/break_pink.svg);
background-repeat: no-repeat;
background-size: cover;
height: 100%;
text-indent: -9999px;
margin-bottom:10px;
}
Had similar issue where the bottom of my header image was getting cut off. Resolved it by using
background-size: contain;
I had a similar issue. It turned out that the image file was damaged in some strange way. Opening the image in the file system worked, the image was OK, but it produced this error in the browser. I deleted the image file and downloaded it again and the image was displayed appropiately with the css rules.
add a min-height property
#breakpink{
// other codes are here
min-height: 150vh;
// to see area of the image
border: 2px solid red;
}
body{
margin: 0;
padding: 0;
background: url(image.jpg);
background-size: auto;
background-size: cover;
height: 100%;
text-indent: -9999px;
margin-bottom:10px;
background-position: center;
font-family: sans-serif;
}
I have
body {
background: url(images/background.svg);
}
The desired effect is that this background image will have width equal to that of the page, height changing to maintain the proportion. e.g. if the original image happens to be 100*200 (any units) and the body is 600px wide, the background image should end up being 1200px high. The height should change automatically if the window is resized. Is this possible?
At the moment, Firefox looks like it's making the height fit and then adjusting the width. Is this perhaps because the height is the longest dimension and it's trying to avoid cropping? I want to crop vertically, then scroll: no horizontal repeat.
Also, Chrome is placing the image in the centre, no repeat, even when background-repeat:repeat is given explicitly, which is the default anyway.
There is a CSS3 property for this, namely background-size (compatibility check). While one can set length values, it's usually used with the special values contain and cover. In your specific case, you should use cover:
body {
background-image: url(images/background.svg);
background-size: cover; /* <------ */
background-repeat: no-repeat;
background-position: center center; /* optional, center the image */
}
Eggsplanation for contain and cover
Sorry for the bad pun, but I'm going to use the picture of the day by Biswarup Ganguly for demonstration. Lets say that this is your screen, and the gray area is outside of your visible screen. For demonstration, I'm going to assume a 16x9 ratio.
We want to use the aforementioned picture of the day as a background. However, we cropped the image to 4x3 for some reason. We could set the background-size property to some fixed length, but we will focus on contain and cover. Note that I also assume that we didn't mangle the width and/or height of body.
contain
contain
Scale the image, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area.
This makes sure that the background image is always completely contained in the background positioning area, however, there could be some empty space filled with your background-color in this case:
cover
cover
Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.
This makes sure that the background image is covering everything. There will be no visible background-color, however depending on the screen's ratio a great part of your image could be cut off:
Demonstration with actual code
div > div {
background-image: url(http://i.stack.imgur.com/r5CAq.jpg);
background-repeat: no-repeat;
background-position: center center;
background-color: #ccc;
border: 1px solid;
width: 20em;
height: 10em;
}
div.contain {
background-size: contain;
}
div.cover {
background-size: cover;
}
/********************************************
Additional styles for the explanation boxes
*********************************************/
div > div {
margin: 0 1ex 1ex 0;
float: left;
}
div + div {
clear: both;
border-top: 1px dashed silver;
padding-top:1ex;
}
div > div::after {
background-color: #000;
color: #fefefe;
margin: 1ex;
padding: 1ex;
opacity: 0.8;
display: block;
width: 10ex;
font-size: 0.7em;
content: attr(class);
}
<div>
<div class="contain"></div>
<p>Note the grey background. The image does not cover the whole region, but it's fully <em>contained</em>.
</p>
</div>
<div>
<div class="cover"></div>
<p>Note the ducks/geese at the bottom of the image. Most of the water is cut, as well as a part of the sky. You don't see the complete image anymore, but neither do you see any background color; the image <em>covers</em> all of the <code><div></code>.</p>
</div>
Based on tips from https://developer.mozilla.org/en-US/docs/CSS/background-size I end up with the following recipe that worked for me
body {
overflow-y: hidden ! important;
overflow-x: hidden ! important;
background-color: #f8f8f8;
background-image: url('index.png');
/*background-size: cover;*/
background-size: contain;
background-repeat: no-repeat;
background-position: right;
}
Background image is not Set Perfect then his css is problem create so his css file change to below code
html {
background-image: url("example.png");
background-repeat: no-repeat;
background-position: 0% 0%;
background-size: 100% 100%;
}
%; background-size: 100% 100%;"
I'm not sure what you're looking for exactly, but you really should check out these excellent blog posts written by Chris Coyier from CSS-Tricks:
http://css-tricks.com/how-to-resizeable-background-image/
http://css-tricks.com/perfect-full-page-background-image/
Read the descriptions for each of the articles and see if they're what you're looking for.
The first answers the following question:
Is there a way to make a background image resizeable? As in, fill the background of a web page edge-to-edge with an image, no matter the size of the browser window. Also, have it resize larger or smaller as the browser window changes. Also, make sure it retains its ratio (doesn't stretch weird). Also, doesn't cause scrollbars, just cuts off vertically if it needs to. Also, comes in on the page as an inline tag.
The second post's goal is to get the following, a "background image on a website that covers the entire browser window at all times. "
Hope this helps.
Just add this one line:
.your-class {
height: 100vh;
}
vh is viewport height.
This will automatically scale to fit the device' browser window.
Check more here: Make div 100% height of browser window
body{
background-image: url(../url/imageName.jpg);
background-attachment: fixed;
background-size: auto 100%;
background-position: center;
}
Try this,
element.style {
background: rgba(0, 0, 0, 0) url("img/shopping_bgImg.jpg") no-repeat scroll center center / cover;
}
I had the same issue, unable to resize the image when adjusting browser dimensions.
Bad Code:
html {
background-color: white;
background-image: url("example.png");
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 0% 0%;
}
Good Code:
html {
background-color: white;
background-image: url("example.png");
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 0% 0%;
background-size: contain;
}
The key here is the addition of this element -> background-size: contain;
Here's what worked for me:
background-size: auto 100%;
width: 100%;
height: 100vh;
background: url("../img/hero-bg.jpg") top center;
background-size: cover;
background-repeat: no-repeat;
background-position: 0% 0%;
background-size: 100% 100%;
if you set min-height, for example:
min-height: 100vh;
You can use the below code to fit your background easily
body {
background: url(images/background.svg);
min-height: 100vh;
background-repeat: no-repeat;
background-size: cover;
}
Setting background size does not help, the following solution worked for me:
.class {
background-image: url(blablabla.jpg);
/* Add this */
height: auto;
}
It basically crops the image and makes it fit in, background-size: contain/cover still didn't make it fit.
I have a background image in the following div, but the image gets cut off:
<div style='text-align:center;background-image: url(/media/img_1_bg.jpg);background-repeat:no-repeat;width:450px;height:900px;' id="mainpage" align="center">
Is there a way to show the background image without cutting it off?
You can achieve this with the background-size property, which is now supported by most browsers.
To scale the background image to fit inside the div:
background-size: contain;
To scale the background image to cover the whole div:
background-size: cover;
JSFiddle example or runnable snippet:
#imagecontainer {
background: url("http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg") no-repeat;
width: 100px;
height: 200px;
border: 1px solid;
background-size: contain;
}
<div id="imagecontainer"></div>
There also exists a filter for IE 5.5+ support, as well as vendor prefixes for some older browsers.
If what you need is the image to have the same dimensions of the div, I think this is the most elegant solution:
background-size: 100% 100%;
If not, the answer by #grc is the most appropriated one.
Source:
http://www.w3schools.com/cssref/css3_pr_background-size.asp
You can use this attributes:
background-size: contain;
background-repeat: no-repeat;
and you code is then like this:
<div style="text-align:center;background-image: url(/media/img_1_bg.jpg); background-size: contain;
background-repeat: no-repeat;" id="mainpage">
background-position-x: center;
background-position-y: center;
you also use this:
background-size:contain;
height: 0;
width: 100%;
padding-top: 66,64%;
I don't know your div-values, but let's assume you've got those.
height: auto;
max-width: 600px;
Again, those are just random numbers.
It could quite hard to make the background-image (if you would want to) with a fixed width for the div, so better use max-width. And actually it isn't complicated to fill a div with an background-image, just make sure you style the parent element the right way, so the image has a place it can go into.
Chris
try any of the following,
background-size: contain;
background-size: cover;
background-size: 100%;
.container{
background-size: 100%;
}
The background-size property specifies the size of the background images.
There are different syntaxes you can use with this property: the keyword syntax ("auto", "cover" and "contain"), the one-value syntax (sets the width of the image (height becomes "auto"), the two-value syntax (first value: width of the image, second value: height).
percentage - Sets the width and height of the background image in percent of the parent element.
cover - Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges
contain - Resize the background image to make sure the image is fully visible
For more: https://www.w3schools.com/cssref/css3_pr_background-size.asp
Alternative:
background-size: auto 100%;
you can also try this, set background size as cover and to get it look nicer also set background position center like so :
background-size: cover;
background-position: center ;