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;
}
Related
So at the moment, I've got a div behind a link, I've set the div background to be a specific image, and I'd like the same image to appear when hovering over that div but a shadow appears around the inside of the box, I have both images with me, but I can't seem to find a way to keep the "Home" background image the same as the "Home:hover" background image but with the shadow box too, I'd like to do this without having to individually place the shadow onto the background image in photoshop.. any thoughts?
Here's the CSS:
#Home {
z-index: 4;
position: absolute;
top: 0px;
left: 707px;
width: 95px;
height: 64px;
margin: 0;
background: url(../images/button%20texture%20b.jpg) center;
border-style: solid;
border-width: 1px;
border-color: #7F7F7F;
}
#Home:hover {
width:95px;
background: url(../images/button%20overlay%20b.png) ;
background-size: cover;
}
.
#Home:hover {
width: 95px;
background: url(../images/button%20overlay%20b.png) center, url(../images/button%20texture%20b.jpg) ;
background-size: cover;
}
Thanks!
I would recommend using this code:
#Home:hover { background:url(../images/button%20overlay%20b.png) no-repeat center, url(../images/button%20texture%20b.jpg) no-repeat top left; }
As you can read here, you can actually assign multiple background images to an element. The first image stated will be on top, the second below the first image and so on.
I have some dynamic images as a background for some divs. Those have variable widths and heights. In front of each such a div i have a radio button. There is a way to align through css each div to be exactly at the middle referring to the radiobutton in front of it? I cannot use fixed background height since there are dynamic and the height are different. I was trying to put background-size: 100% 100%; or background-size: auto;
Doesn't work
Any help is more than welcome, thanks!!!
Try:
background-position: center center;
=====
UPDATE:
It's a lot easier working with your fiddle!
Try this:
div.VISA_logo {
background: url("http://www.globalworkandtravel.com/sites/all/modules/customshare/includes/facebook.png") no-repeat;
}
div.VISA_CARTE_BLEUE_logo{
background: url("http://www.discoverireland.ie/App_Themes/DiscoverIreland/images/discoveries/button-add-trip-small.png") no-repeat;
}
div.MasterCard_logo{
background: url("https://s3.amazonaws.com/sugarstats/s3_avatars/7287/1234222094_norm.jpg") no-repeat;
}
div.AMEX_logo{
background: url("http://www.uappointment.com/images/google-small-icon.png") no-repeat;
}
div.PAYPAL_logo{
background: url("http://i.imgur.com/EqgOS.png") no-repeat;
}
div.VISA_logo,
div.MasterCard_logo,
div.PAYPAL_logo,
div.VISA_CARTE_BLEUE_logo,
div.MasterCard_DE_FR_UK_logo,
div.AMEX_logo {
width: 105px;
margin-left: 5px;
height: 42px;
float: right;
margin-right: 30px;
background-position:0 center;
}
Need some help with CSS background repeat. Below is the wire-frame for the functionality I am trying to achieve.
Current Code:
HTML:
<div class="wrapper">
<div class="container"></div>
</div>
CSS:
.container{
min-height: 10000px;
background-image: url(background1.png), url(background2.png);
background-repeat: no-repeat, repeat-y;
background-position: center top, center 1000px;
}
The current code displays background1 only one time and repeats background2 as I want,but the background2 image starts from the top of the page. I want it to start exactly after the background1 image ends as shown in the wireframe.
NOTE: Both the images background1 and background2 have transparent shapes in them which makes makes the other image visible in the background.
If you set a background to repeat, it can not be limited (AFAIK)
the solution would be to limit it to a pseudo element, and limit this pseudo element to where you want it (with the top property)
.test {
width: 300px;
height: 600px;
border: solid black 1px;
position: relative;
}
.test:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 200px;
background-image: url(http://placekitten.com/g/600/400);
background-repeat-y: repeat;
}
<div class="test"></div>
Note that the height of 100% is not accurate, if you want it to be accurate set it to your dimension
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.
Working with a bit of in-line CSS within a CMS (fun!). This chunk of code works as it should in Chrome and Firefox, the background image occurs just once. But when the page loads in IE 9, it's as if the no-repeat value is ignored and the background images repeats through the length of the div.
<div style="width: 500px; margin-top: -10px; background-image: url(http://.../uploadedImages/horizontal-rule-top.gif); background-position: 50% 0%; background-repeat: no-repeat, no-repeat; "><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: rgb(228, 128, 28); padding-top: 30px; padding-bottom: 15px; font-size: 16px; ">
...</div>
Any advice would bemuch appreciated!
I think IE's having trouble with the presence of the second no-repeat, and, per spec, disregarding the rule it doesn't understand. The options that IE understands seem to be:
repeat-x,
repeat-y, and
no-repeat.
If you amend your CSS to one of the above it should work.
Try background-repeat: no-repeat; without the second value. I believe the two value syntax is part of the CSS3 working draft and may not be implemented by IE9.
Try your background css "background: url(http://.../uploadedImages/horizontal-rule-top.gif) no-repeat 50% 0%;"
Prova con:
background-repeat-x: no-repeat;
background-repeat: repeat-y;