For some reason my tiled image doesn't tile over the whole background. Though it fills the whole background when I resize the window a little bit.
The background is set in css.
body {
background: url(img/tile.gif) #e6e6e6;
width: 100%;
height: 100%;
}
This is in Chrome and Safari, so webkit. Works fine in Firefox.
Try:
body{
background-image: url(img/tile.gif);
background-color: #e6e6e6;
background-repeat: repeat-x;
}
background: url(img/tile.gif) repeat #e6e6e6;
Related
A bit of a strange one. The background image (or even when I add a color) to the header on the website, that contains the menu items will not be displayed in IE8. It seems to work on Chrome and Firefox however in IE8 it does not display. The Url is http://www.esfdev.co.uk/emmanuel/ any help will be greatly appreciated.
CSS is below.
div#header {
background-image: url("./images/headerBg.png") !important;
background-position: center bottom;
background-repeat: repeat;
height: 93px;
position: fixed;
width: 100%;
z-index: 10 !important;
}
Thanks
Very weird issue. The nav-bar background image is loading fine in all browsers except for Safari.
http://lapalomafunrun.com/
Here is the code I'm using:
#navbar {
width: 100%;
height: 53px;
margin-top: -10px;
position:relative;
z-index:1;
background: url("http://lapalomafunrun.com/wp-content/themes/funrun/images/navbar.png") no-repeat scroll center top / 100% 63px transparent !important;
background: url("http://lapalomafunrun.com/wp-content/themes/funrun/images/navbar.png") no-repeat scroll center top transparent\9 !important;
}
The CSS 3 background shorthand isn't supported in Safari 6.02 (which I'll assume you're using since it isn't working). You can use the CSS 2.1 background shorthand syntax but will need to remove the background-size property to its own declaration:
#navbar {
width: 100%;
height: 53px;
margin-top: -10px;
position:relative;
z-index:1;
background: url("http://lapalomafunrun.com/wp-content/themes/funrun/images/navbar.png") no-repeat scroll center top transparent !important;
background-size: 100% 63px;
}
I was just having the issue where I couldn't apply a background-image property to the <main> element in Safari. Come to find that Safari (currently) doesn't recognize <main> as a block element, as can happen with many of the implementations of HTML5, so setting <main> to display:block did the trick for me. Hopefully that helps.
I would like to include the repeated background image that is on my background to my navigation bar as well.
#navigation-top, #navigation-bottom {
background-color: #fff;
width: 100%;
}
http://www.sanisportwest.com/
The problem on your site is that "image.jpg" does not exist.
#navigation-top, #navigation-bottom {
background: #fff url('path/to/image.jpg') repeat;
width: 100%;
}
If you only want it to repeat left to right (and not up and down), use repeat-x.
You can use repeat-x or repeat-y, depending on the orientation of your image and Nav bar. Assuming your Nav bar is horizontal:
#navigation-top, #navigation-bottom {
width: 100%;
background: url(images/background_image.gif) repeat-x;
}
background: #ffffff url("yourimg") repeat-x;
Copy all of the background related CSS from #canvas-wrapper and paste it into #navigation-top, #navigation-bottom.
The CSS -
#header {
overflow: hidden;
background: url(images/header-bg.png) top repeat-x #FFFFFF;
position: relative;
border: none;
display: block;
height: 125px;
width:100%;
}
The HTML -
<div id="header">
<img src="images/logo.png" alt="" />
</div>
This works good in Firefox -
But not in Chrome :( -
The image isn't being stretched vertically in Chrome.
Help!
Just a note, I'm on Linux.
Edit : The background image (50x112px) -
Check it out here - http://movie-buffs.info/
So chrome was automatically taking up background-size from another css file.
When I put
background-size: auto auto !important;
in #header,
the issue was gone.
Thanks everyone for help.
The shorthand you are using for background, is placing the color #FFFFFF in the last argument, it's supposed to be in the first. Try getting rid of the shorthand, so your code will look like this:
/* background: url(images/header-bg.png) top repeat-x #FFFFFF; */
background-image: url(images/header-bg.png);
background-repeat: repeat-x;
background-color: #fff;
background-position: top;
Shorthand order:
background-color, background-image, background-repeat, background-attachment, background-position
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;
}