I m really having a hard time displaying a background image on old IE versions (6-8).
Here is my code:
#top
{
background-image: url(http://some-domain.com/myimage.jpg) no-repeat;
background-color:#830703;
border-bottom: 1px solid #303130;
height: 128px;
width:100%;
overflow: hidden;
zoom:1;
}
I have tried it to write it in many different ways but it didn't work.
Does anyone have an idea?
Use the below.
#top
{
background: url(http://some-domain.com/myimage.jpg) no-repeat #830703;
border-bottom: 1px solid #303130;
height: 128px;
width:100%;
overflow: hidden;
zoom:1;
}
Hope this helps.
Use either one of the below
background-image: url(http://some-domain.com/myimage.jpg) no-repeat;
background-color:#830703;
background-repeat: no-repeat;
or
background: url(http://some-domain.com/myimage.jpg) no-repeat #830703;
please do follow
background:#830703 url('http://ssl.gstatic.com/gb/images/v1_53a1fa6a.png') no-repeat;
This should actually never show up correctly as you have a small syntactical error. you mixed background-image and background-repeat. Either use the background-shortcut or just split them up:
background-image: url(http://some-domain.com/myimage.jpg);
background-repeat: no-repeat;
Related
Basically, right now I have multiple images but only one at as a background image to my body (being a blue square) and I need to to end at the start of the footer, so underneath the footer is black but no matter what I do, it doesn't seem to help.
Here's an example http://bit.ly/1nKIee1 (on postimage)
I thought that maybe if I ended the body tag, then started the footer tag it wouldn't do it but that doesn't seem to fix anything.
CSS
.nav {
background-image: url(image/top.png);
background-repeat: repeat-x;
}
body {
background-image: url(image/blue.png);
background-repeat: repeat;
background-size: contain;
background-color: #000000;
}
footer {
background-image: url(image/footer.png);
background-repeat: repeat-x;
background-color: #000000;
font-size: 14px;
text-decoration: none;
text-shadow: #000000 1px 1px;
padding: 45px;
}
Thanks in advance - Shy ♥
Don't give background property to body instead of this use a div inside body upto footer and give these properties to that div for example
HTML :
<nav>......</nav>
<div class="container">......</div>
<footer>.........</footer>
CSS :
.nav {
background-image: url(image/top.png);
background-repeat: repeat-x;
}
container {
background-image: url(image/blue.png);
background-repeat: repeat;
background-size: contain;
background-color: #000000;
}
footer {
background-image: url(image/footer.png);
background-repeat: repeat-x;
background-color: #000000;
font-size: 14px;
text-decoration: none;
text-shadow: #000000 1px 1px;
padding: 45px;
}
If you set a background to the whole body, it will apply to the whole body…
And you can’t put a footer (or what so ever is displayed) outside the body.
I guess in your case I would create a div#pageContainer to put your page content, and apply the blue background to it with
div#pageContainer {
background-image: url(image/blue.png);
background-repeat: repeat;
background-size: contain;
background-color: #000000;
}
Here is a jsfiddle.
I have the above image
I have to set it in such a way that it covers the entire page. I tried the following code.
margin: 0px;
background: url(../images/common/header/Background_color.png);
background-repeat:repeat-x;
background-attachment:fixed;
background-position:top center;
height: 100%;
width: 100%;
border: 0;
display:inline-block;
background-color: transparent;
But what I get is this.
It is not covering the entire page. At the bottom I am getting the white space.Could anyone help me? Thanks in advance.
Just change this
background: url(../images/common/header/Background_color.png); background-repeat:repeat-x;
To this
background: url(../images/common/header/Background_color.png); background-repeat:repeat;
try this :
background-size: cover;
I am looking to fix my second full width image (the one in the middle of the page) so that is fits horizontally the same as the one above in the header image. Can somebody double check my CSS so see if it is correct. It needs to auto resize to fit the screen like the header image above. When i view it on mobile it is not fitting correctly. Thanks for taking a look.
http://www.jobspark.ca
.fullWidthSectionBG {
background-image: url('http://static.squarespace.com/static/513d5347e4b0abff73be5264/t/519c45c4e4b084baf13d7e27/1369195972115/rocktruck2.jpg');
border-bottom: solid 1px #ddd;
border-top: solid 1px #ddd;
margin-left: -1600px;
margin-right: -1600px;
padding-top:20px;
padding-bottom:330px;
overflow: hidden;
background-position: center;
background-repeat: no-repeat;
background-size: auto;
}
You need to add the height on to your div I think. Here's the fiddle. I just added a height to the div and now it resizes fine... Is that what you needed it to do?
.fullWidthSectionBG {
background-image: url('http://static.squarespace.com/static/513d5347e4b0abff73be5264/t/519c45c4e4b084baf13d7e27/1369195972115/rocktruck2.jpg');
width:100%;
background-position:center;
height:575px;
}
Updated css (still resizes)
.fullWidthSectionBG {
background-image: url('http://static.squarespace.com/static/513d5347e4b0abff73be5264/t/519c45c4e4b084baf13d7e27/1369195972115/rocktruck2.jpg');
background-position: bottom center;
background-size: cover;
height:575px;
background-attachment: scroll;
background-repeat: no-repeat;
}
Well, I have a website and the front page has this image repeated all the way down. While on Chrome, is only repeats once, just like I want it to.
body {
color: #999999;
background-color: #490000;
background:url('http://pigymunk.co.uk/bgasdf2.png') fixed, url('http://pigymunk.co.uk/bgasdf.png') fixed;
background-repeat: no-repeat, repeat;
background-position: left top, left top;
}
You have
background-repeat: no-repeat, repeat;
You can only specify either no-repeat or repeat - not both, e.g.
background-repeat: no-repeat;
Chrome supports CSS3 syntax allowing both but many browsers such as IE consider this invalid as it doesn't support it. (Remember CSS2 is standard, CSS3 is only partially supported)
Updated:
To create a layerd background you need to use layers surprise surprise :).
body {
color: #999999;
background-color: #490000;
background: url('http://pigymunk.co.uk/bgasdf.png');
background-repeat: repeat;
background-position: left top;
}
#logo {
height: 200px;
width: 220px;
background: url('http://pigymunk.co.uk/bgasdf2.png') no-repeat top left;
position: absolute;
top: 0px; left: 0px;
}
HTML:
<body>
<div id="logo"></div>
...
or better yet, don't use a background image for your logo as it won't appear when background images are turned off, e.g. for printing. Crop the image to the correct size for the logo and put it in the html
<body>
<div id="logo"><img src="http://pigymunk.co.uk/bgasdf2.png" alt="Piggymunk logo" /></div>
...
jsfiddle example: http://jsfiddle.net/ytL2w/
This works fine in IE9 for me:
body {
color: #999999;
background-color: #490000;
background: url('http://pigymunk.co.uk/bgasdf2.png') no-repeat fixed left top,
url('http://pigymunk.co.uk/bgasdf.png') repeat fixed left top;
}
Try this:
body {
color: #999999;
background-color: #490000;
background-image:url('http://pigymunk.co.uk/bgasdf2.png');
background-position: fixed;
background-repeat: no-repeat;
}
Is there any way to apply multiple background images using sprites?
something like the below code?
background-image: url("../images/button-sprite.gif"),url("../images/button-sprite.gif");
background-position: right -92px, 0px 0px ;
background-repeat: no-repeat;
font-size: 1em;
margin-right: 5px;
padding-right: 35px;
width:500px;
height:500px
You can have multiple background images
see the EXAMPLE
Here is my css:
.sprite_box
{
background:
url(http://i.imgur.com/On0lt.png) -162px -551px no-repeat,
url(http://i.imgur.com/On0lt.png) -200px -530px no-repeat,
transparent;
height: 24px;
width: 81px;
margin:5px;
}
Read about sprite here
Here you can create sprite image
Here you create css for your sprite image
Yes, you can have multiple background images, but it is limited to box items. There is some info on this at CSS3.info
Yes, you can. The shorthand method is less verbose:
.sprite {
background:
url(http://www.google.com/images/srpr/nav_logo41.png) 0 -243px no-repeat,
url(http://www.google.com/images/srpr/nav_logo41.png) 42px -93px no-repeat,
#ccc;
width: 160px;
}
Note that you can only state one background color, and you state it at the end of the declaration.
See it in aciton http://jsfiddle.net/TMHPh/