I am looking for background-image for content section of my home page. I have found a suitable picture but it is not fitting properly behind content.
Try it with CSS3 property background-size like this
.element {
background-image: url('{path}');
background-size: cover;
}
See also here: https://developer.mozilla.org/de/docs/Web/CSS/background-size
You should just use background size property:
background-size: 100px 50px;
Related
i'm pretty new to CSS but I made something in illustrator (web)and wanted to put this as background-image in css. I've put the image in a <div> and CSS in I just put background-image: url(berg.jpg), i'm sure the url is correct, but it doesn't display anything. I've put height: 100% in css after that and it showed up but it was all zoomed in and only displays a small corner of the picture because of the zoom. How can I display this correctly? The image size is width: 1366px; height:768px.
Sorry if this is already asked but I couldn't seem to find it. Thx on advance.
Your image is displaying as full size. If you add the background-size attribute to your css, you can define the size.
See this link for all background-size options:
https://www.w3schools.com/cssref/css3_pr_background-size.asp
You can also define the background-position to have image centered, etc.
https://www.w3schools.com/cssref/pr_background-position.asp
CSS example
#problem-image {
height: 200px;
width: 200px;
background-image: url('https://images.unsplash.com/photo-1463852247062-1bbca38f7805?auto=format&fit=crop&w=2255&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D');
}
#correct-image {
height: 200px;
width: 200px;
background-image: url('https://images.unsplash.com/photo-1463852247062-1bbca38f7805?auto=format&fit=crop&w=2255&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D');
background-size: cover;
background-position: center center;
}
See jsfiddle for full working example:
https://jsfiddle.net/3o8b2e4s/
You can try to put bakcground-size: cover; in your CSS code and this will ocupe all background of your div independent of width or height.
I am trying to use the graphic below and I would like to repeat from the right to continue on the boards. What would my best options be?
You can make this image the background of an css element and set property repeat-x.
background: url("paper.gif") repeat-x;
You can use background-position property, like this:
body {
background-image: url("http://i.stack.imgur.com/mIZCl.jpg");
background-position: right 0;
background-repeat: repeat-x;
}
http://jsfiddle.net/72p5h6hs/2/
Repeating the background might look a little funny so as an alternative you can use background-size:cover to make the image stretch the whole width of the screen.
body {
background-image: url("http://i.stack.imgur.com/mIZCl.jpg");
background-size: cover;
}
I have a giant background image that I need 100% 100% scale. But my problem is if the webpage is say 150% height that of the browser (so browser is say 1000x1000, and my website is 1000x1500) when you scroll down to see the rest of the website the background repeats and doesn't get scaled down.
My css is
html,body { width: 100%; height 100%; }
body { background: url(blah) no-repeat; background-size: 100% 100%; }
Any idea of how I can fix that?
Here is a great resource on that topic.
http://css-tricks.com/perfect-full-page-background-image/
Hope it helps.
Like the CSS-Tricks article explained, you could change the CSS to:
html {
background: url(images/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
This will make sure your background image covers the whole page, but is only supported in CSS3. Like above, you need to include specific code for each major browser.
Alternatively, try just using:
height: 100%;
or
width: 100%
depending on the image size in relation to your page, but this should let the image resize to the right height/width of your page, while nicely maintaining aspect ratio.
Try applying the background image to the html instead.
Just set 100% on the width if its smaller then the height otherweise set the height 100%. You could probably fix that with javascript.
I'm currently working on a mobile landing page for a company. It's a really basic layout but below the header there's an image of a product which will always be 100% width (the design shows it always going from edge to edge). Depending on the width of the screen the height of the image will obviously adjust accordingly. I originally did this with an img (with a CSS width of 100%) and it worked great but I've realised that I'd like to use media queries to serve different images based on different resolutions - let's say a small, medium and a large version of the same image, for example. I know you can't change the img src with CSS so I figured I should be using a CSS background for the image as opposed to an img tag in the HTML.
I can't seem to get this working properly as the div with the background image needs both a width and a height to show the background. I can obviously use 'width: 100%' but what do I use for the height? I can put a random fixed height like 150px and then I can see the top 150px of the image but this isn't the solution as there isn't a fixed height. I had a play and found that once there is a height (tested with 150px) I can use 'background-size: 100%' to fit the image in the div correctly. I can use the more recent CSS3 for this project as it's aimed solely at mobile.
I've added a rough example below. Please excuse the inline styles but I wanted to give a basic example to try and make my question a little clearer.
<div id="image-container">
<div id="image" style="background: url(image.jpg) no-repeat; width: 100%; height: 150px; background-size: 100%;"></div>
</div>
Do I maybe have to give the container div a percentage height based on the whole page or am I looking at this completely wrong?
Also, do you think CSS backgrounds are the best way to do this? Maybe there's a technique which serves different img tags based on device/screen width. The general idea is that the landing page template will be used numerous times with different product images so I need to make sure I develop this the best way possible.
I apologise is this is a little long-winded but I'm back and forth from this project to the next so I'd like to get this little thing done.
Tim S. was much closer to a "correct" answer then the currently accepted one. If you want to have a 100% width, variable height background image done with CSS, instead of using cover (which will allow the image to extend out from the sides) or contain (which does not allow the image to extend out at all), just set the CSS like so:
body {
background-image: url(img.jpg);
background-position: center top;
background-size: 100% auto;
}
This will set your background image to 100% width and allow the height to overflow. Now you can use media queries to swap out that image instead of relying on JavaScript.
EDIT: I just realized (3 months later) that you probably don't want the image to overflow; you seem to want the container element to resize based on it's background-image (to preserve it's aspect ratio), which is not possible with CSS as far as I know.
Hopefully soon you'll be able to use the new srcset attribute on the img element. If you want to use img elements now, the currently accepted answer is probably best.
However, you can create a responsive background-image element with a constant aspect ratio using purely CSS. To do this, you set the height to 0 and set the padding-bottom to a percentage of the element's own width, like so:
.foo {
height: 0;
padding: 0; /* remove any pre-existing padding, just in case */
padding-bottom: 75%; /* for a 4:3 aspect ratio */
background-image: url(foo.png);
background-position: center center;
background-size: 100%;
background-repeat: no-repeat;
}
In order to use different aspect ratios, divide the height of the original image by it's own width, and multiply by 100 to get the percentage value. This works because padding percentage is always calculated based on width, even if it's vertical padding.
Try this
html {
background: url(image.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Simplified version
html {
background: url(image.jpg) center center / cover no-repeat fixed;
}
Instead of using background-image you can use img directly and to get the image to spread all the width of the viewport try using max-width:100%;.
Please remember; don't apply any padding or margin to your main container div as they will increase the total width of the container. Using this rule, you can have a image width equal to the width of the browser and the height will also change according to the aspect ratio.
Edit: Changing the image on different size of the window
$(window).resize(function(){
var windowWidth = $(window).width();
var imgSrc = $('#image');
if(windowWidth <= 400){
imgSrc.attr('src','http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a');
}
else if(windowWidth > 400){
imgSrc.attr('src','http://i.stack.imgur.com/oURrw.png');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image-container">
<img id="image" src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a" alt=""/>
</div>
In this way you change your image in different size of the browser.
You can use the CSS property background-size and set it to cover or contain, depending your preference. Cover will cover the window entirely, while contain will make one side fit the window thus not covering the entire page (unless the aspect ratio of the screen is equal to the image).
Please note that this is a CSS3 property. In older browsers, this property is ignored. Alternatively, you can use javascript to change the CSS settings depending on the window size, but this isn't preferred.
body {
background-image: url(image.jpg); /* image */
background-position: center; /* center the image */
background-size: cover; /* cover the entire window */
}
Just use a two color background image:
<div style="width:100%; background:url('images/bkgmid.png');
background-size: cover;">
content
</div>
Add the css:
html,body{
height:100%;
}
.bg-img {
background: url(image.jpg) no-repeat center top;
background-size: cover;
height:100%;
}
And html is:
<div class="bg-mg"></div>
CSS: stretching background image to 100% width and height of screen?
It's 2017, and now you can use object-fit which has decent support. It works in the same way as a div's background-size but on the element itself, and on any element including images.
.your-img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
html{
height:100%;
}
.bg-img {
background: url(image.jpg) no-repeat center top;
background-size: cover;
height:100vh;
}
I was also facing your problem. Two solutions come to my mind through HTML and CSS :
Solution 1) HTML img tag
.img-container {
width: 100%;
border: 1px solid #000;
}
.img-container img {
width: 100%;
pointer-events: none;
}
<div class="img-container">
<img src="https://i.postimg.cc/ht1YnwcD/example.png">
</div>
Solution 2) CSS background image
First find width and height of your image file, you can right click on your image and choose Properties then go to details tab. you can see your image dimensions (according to the picture).
enter image description here
Then remember them.
.img-container {
width: 100%;
// height: calc(100vw / (your image width / image height));
height: calc(100vw / (812 / 133));
background-image: url('https://i.postimg.cc/ht1YnwcD/example.png');
background-position: top;
background-repeat: no-repeat;
background-size: 100% auto;
border: 1px solid #000;
}
<div class="img-container"></div>
I hope it was useful ;)
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 ;