body{
margin: 0 auto;
width: 1000px;
height: 100%;
padding-top:150px;
background: url('images/background.jpg');
background:#5F755D;
}
Okay so, that's the css I'm using and I cannot seem to get the background to change from this ugly colour the background image I want. Any ideas?
You are overwriting the background image, with the color. Change the CSS to this:
body{
margin: 0 auto;
width: 1000px;
height: 100%;
padding-top:150px;
background-color:#5F755D;
background-image: url('images/background.jpg');
}
This way, the color will be shown, if the image cant be found.
You set the background image, and then overwrite by using a color in the next line:
background:#5F755D;
You will see the image (if it exists) if you remove the above line. Note that the image will repeat itself. You can disable it by using
background-repeat: no-repeat;
Just merge your background color and background image like so:
body{
margin: 0 auto;
width: 1000px;
height: 100%;
padding-top:150px;
background:#5F755D url('images/background.jpg') no-repeat;
}
Related
I'm setting up a site, and want to create a responsive background image but I'm getting only single line with background image. What property should i need to use to make the entire background image to fit?
I created 2 files,
index.html :
<div id="logo">Test</div>
style.css :
#logo {
background-image: url("bg.png");
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
I tried many times but only single line gets background image. I want the background image to be fully displayed on screen without using height property which i think makes site less responsive.
you should change the height of logo div and set it as full height by adding height:100% for the body and logo div, your code should look like below code
html, body
{
height: 100%;
}
#logo {
background-image: url("bg.png");
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
height:100%;
}
If you want the image to have the same height as the screen you can use height:100vh. But if you want only the image full size you can do this like this :
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#image{
max-height: 100%;
max-width: 100%;
}
#text{
position: absolute;
color: white;
top: 0
}
<img id="image" src="https://images.unsplash.com/photo-1528920304568-7aa06b3dda8b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80">
<div id="text">test</div>
I'm trying to set the size (both width and height) of a div to match it's background image size, but I can't get it working.
The background image size has to be in percentages, because I'm dealing with a responsive website. On smaller screens, the background should be displayed completely (with less width, but still proportional), and the div who has the image should follow that size.
I tried various values of the background-size, such as auto 100%, cover, contain, etc. but nothing did the trick.
There's a similar question here about this: scale div to background image size but it didn't solve my problem either.
I'd really appreciate if someone knows how to do it.
EDIT:
I made a fiddle to show the behavior: http://jsfiddle.net/osv1v9re/5/
This line is what is making the background image so small:
background-size: auto 100%;
But if it is removed is removed, the background will fill the proper width, but not the height.
tag cannot adapt to background-image size, you need to use an tag and choose between height: auto for the div or javascript
// **** Problem ****
// Wrong html :
<div class="my_class"><div>
// with css :
.my_class {
width: 100%;
height: 100%;
background-image: url(/images/my-image.jpg);
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
}
//**** Solution ****
// use css:
.my_class {
width: 100%;
height: 100%;
background-image: url(/images/my-image.jpg);
background-size: contain;
}
*{
padding: 0;
margin: 0;
}
div{
width: 100%;
}
div figure{
padding-top: 36.56%; /* 702px/1920px = 0.3656 */
display: block;
background: url("https://st.fl.ru/images/landing/bg2.jpg") no-repeat center top;
background-size: cover;
}
<div>
<figure></figure>
</div>
you can have a responsive height using the padding-bottom or padding-top
because you can't fix an height property in '%' with a width in '%'.
div{
background-image: url(url);
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
margin: 0 auto;
width: 100%;
padding-bottom: heightPicure / widthPicture + %; //do it manually or using scss rules
}
For some reason, background images are not showing up at all in IE11 (Windows 7 Pro).
.home {
position:relative;
height: 620px;
background-image: url(/images/bg_home3.jpg);
background-position: 540px 190px;
background-repeat: no-repeat;
}
Any clues?
If you are trying to set background to HTML5 element there is a chance that it doesn't have some default style in IE11. For example if the element is main try to set display: block to it. You may also try to set width, but without seeing more of your code can't help you more. Look the example below.
.home {
display: block;
width: 100%;
position:relative;
height: 620px;
background-image: url("/images/bg_home3.jpg");
background-position: 540px 190px;
background-repeat: no-repeat;
}
necessary use width: 100px; <= you size px
.home {
position:relative;
height: 620px;
width: 200px;
background-image: url('/images/bg_home3.jpg');
background-position: 540px 190px;
background-repeat: no-repeat;
}
Use a png image as it seems IE 11 cannot display jpg with non web colors.
I think with two easy steps you can eliminate the problem:
Set display: block; The display property specifies the display behavior on your page. IE 8 and upper versions fully supports this property.
Put your url between quotation marks ("").
background-image: url("/images/something.jpg");
I found setting the background size of the image made it display in IE11.
I also had to set the width and height. Setting the value of these attributes to auto it didn't work.
How to create background like this in css(middle and last block has fluid height):
Are there any good tutorials?
You would make the top and bottom div elements and set their css as follows:
#topBGDiv
{
width: 100%;
height: 125px; // Make this the height of the background image in pixels
background-image: url('dark-gray-ribbon.jpg');
background-repeat: repeat-x;
overflow: hidden;
}
#bottomBGDiv
{
width: 100%;
height: 110px; // Make this the height of the background image in pixels
background-image: url('light-gray-ribbon.jpg');
background-repeat: repeat-x;
overflow: hidden;
}
use an image like this for the background image of the top:
and one like this for the bottom:
Lastly, set the CSS for the page's background-color to be the middle color. So, something like this:
body
{
background-color: #C0C0C0;
}
You can write like this:
#top,#bottom
{
height: 110px; // Make this the height of the background image in pixels
background: url('BG.jpg') repeat-x left top;
}
#bottom
{
background-position:left bottom;
}
My website (http://www.webbuddies.co.za) works perfectly, but when viewed at 1280x1024 resolution, there's a bit of white visible at the bottom of the page that I'd like to get rid of.
The background is a gradient image and rather than recreating the image, I want to just change the color of the background to match the bottom of the gradient. Can this be done?
Here's my CSS:
body {
background: transparent url("Images/Background.png") repeat-x;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
If I change transparent to a color, the image disappears... any ideas?
Thanks in advance!
You can just use the background-color attribute in your CSS, setting the color to the bottom color of your image. For example:
background-color:#00ff00;
simply set an additional background-color like this:
body {
background-image:url("Images/Background.png");
background-repeat:repeat-x;
background-color:#999999; /* << inset your gray here */
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}