I am 100% at a loss as to why I cannot get a background-image to display. I have tried multiple different images to rule that out. I have also changed src to url, changed the background-size from cover to auto 100%. Nothing I do will get the image to display.
Does anyone see why my background image will not display?
#home-img {
background-image: url("http://cosmotekcollege.com/wp-content/uploads/2015/08/ban4.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-position: 50% 50%;
width: 100%;
height: auto;
position: relative;
}
<div id="home-img">
</div>
Here is jsfiddle
If you use backgound-image and you don't have content inside div, you always should set height. Here is example https://jsfiddle.net/5pphkLmt/5/
<div id="home-img">
</div>
#home-img {
background-image: url("http://cosmotekcollege.com/wp-content/uploads/2015/08/ban4.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-position: 50% 50%;
width: 100%;
height: 540px;
position: relative;
}
Using Chrome Inspect, I changed the #home-img height from "auto" to 537px and then the image appeared. So updating the height is one option to fix this issue.
Another option is covered in this SO Q&A entry.
How to get div height to auto-adjust to background size?
you should add height to your code or put something in this DIV, just test height: 100px; and enjoy it :)
Related
I have HTML and CSS like this:
.item {
width: 100%;
height: 768px;
background-image: url("https://a0.muscache.com/im/pictures/f1502649-e034-40ab-9fed-7992b7d550c6.jpg?im_w=1200");
background-repeat: no-repeat;
background-size: 100% auto;
border-radius: 50px 50px;
}
<div class='item'></div>
When I resize the browser, the bottom border-radius doesn't work.
Change background-size: cover; and you could add background-position: center; to center your image.
.item {
width: 100%;
height: 768px;
background-image: url("https://a0.muscache.com/im/pictures/f1502649-e034-40ab-9fed-7992b7d550c6.jpg?im_w=1200");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border-radius:50px 50px;
}
<div class='item'></div>
As mentioned in other answers, you might want to use background-size: cover;. It will stretch the image to cover the whole area of the div (so the border-radius will be visible).
However since the image can be cropped after this change (specifically in the case when it does not have the same aspect-ratio like the area of the div), it might be necessary to use also background-position to position the background image as you like (by default it is aligned to the top left corner).
Most probably you will have good results with centering it, but the possibilities are endless ;)
background-size: cover;
background-position: center;
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 have a background image that I would like to fill the width of the (responsive) page. I.e. if the page is huge, the width of the image is also huge. However if the width shrinks down the image is cropped rather than scaled (because I want the height to stay the same, i.e. no white space anywhere).
I have most of it working, except filling the width.
Here is my jsfiddle: https://jsfiddle.net/jwdyc1rh/
HTML:
<body class=" cms-index-index cms-home">
<div class="main-container col1-layout">
<div class="main">
</div> <div>
</div>
CSS:
body.cms-home .main-container {
margin-top: -20px;
background-image: url(http://www.mrwallpaper.com/wallpapers/flower-field-summer-1280x1024.jpg);
background-repeat: no-repeat;
min-height: 1024px;
background-position: center;
width: 100%;
}
Kind of hard to see without stretching the screen huge, but you can see the white background if it's stretched, rather than the image scaling to fit.
A perfect example of this working how I want is www.prada.com but I can't seem to work out the right code.
Use background-size: cover;
jsfiddle
Apply background size like background-size: 100% 100%;
It will do the trick.
body.cms-home .main-container {
margin-top: -20px;
background-image: url(http://www.mrwallpaper.com/wallpapers/flower-field-summer-1280x1024.jpg);
background-repeat: no-repeat;
min-height: 1024px;
background-position: center;
width: 100%;
background-size: 100% 100%;
}
Updated Fiddle
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
I have a header div, which I want to be fully covered with a background image. I want the image to be fully shown, so nothing is cropped. However, it seems to be stretching the image and cropping it.
css:
..header{
border-top-left-radius:5px;
border-top-right-radius: 5px;
max-width: 600px;
width:100%;
height: auto;
min-height: 200px;
background: url("img/bg-abstract.jpg") no-repeat fixed;
background-position: left top;
background-size: 100%;
position: relative;
background-attachment: fixed;
background-repeat: no-repeat;
}
What you need is
background-size:cover
background-size: cover Also try using % instead of px.
For some reason I can't get an image to span 100% width across the browser.
You can find my site here.
My div reads:
<div class="home" style="background-image: url(http://payload51.cargocollective.com/1/7/237315/3336908/HomeImage_o.jpg);
background-attachment: fixed; height: 560px; width: 100%; opacity: 1; background-position-y: 0px; background-position-x: center; background-repeat: no-repeat no-repeat; ">
</div>
Any help would be appreciated.
In your website you stretch your div to the whole page width. But the background image won't stretch unless you do:
background-size: 100%;
Background images are not resized with the size of the element containing them. Why not use
<img class="home" src="http://payload51.cargocollective.com/1/7/237315/3336908/HomeImage_o.jpg"
style="background-attachment: fixed; width: 100%; opacity: 1; background-position-y: 0px; background-position-x: center; background-repeat: no-repeat no-repeat; ">
</div>
and remove the property
height: 560px;
?
Add background-size: 100% auto;
<div class="home" style="background-image: url(http://payload51.cargocollective.com/1/7/237315/3336908/HomeImage_o.jpg);
background-attachment: fixed; height: 560px; width: 100%; opacity: 1; background-position-y: 0px; background-position-x: center; background-repeat: no-repeat no-repeat; background-size: 100% auto;">
</div>
Use this CSS property
background-size:100% 560px;
Which tells that your background image should expand to 100% in width but have 560px as height.
I don't like the idea of stretching a image to fit the browser's window. As this depends on the client's machine on how the site will appear.
So, I will not suggest searching for such solutions. Rather:
Use repeating image as a background
Fix the dimensions of the image container. The effect you are trying to create will still look pretty cool
Detect the screen size and change the background as per the resolution.